AngularJS $Modal itself is undefined - javascript

Im trying to make my first modal using Angular, but it seems that the $modal cant even be found! Here is my code:
myController = ($scope, $modal) ->
$scope.OpenModal = ->$modal.open(
templateUrl: 'Modal.html'
)
And the HTML points to the OpenModal function as follows -
<div ng-controller="myController">
<button ng-click="OpenModal()">Modal</button>
</div>
But when I click the button, I get the error Cannot read property 'open' of undefined. Why is that? Shouldn't the modal object be injected in?

I found the issue. I had already included ui.bootstrap in my app, but I forgot to put $modal in the controller dependencies.

Related

trigger function on tab change in angular

I have site with tabs that contain some data. The $scope is changed to vm in the controller. I want to execute a function every time the tab is changed.I have tried ng-change, but that only lead to errors in angular.
So I did read some postings here and found the ngModel method. But this does not work either. I always get a Error: String contains an invalid character from angular.min.js .
<b2b-tabset tab-id-selected="vm.activeTabsId" ng-if="vm.selectedUserID" [ngModel]="vm.activeTabsId" (ngModelChange)="vm.changeTab()" >
<b2b-tab ng-repeat="tab in vm.gTabs" tab-item="tab" id="{{tab.uniqueId}}" aria-controls="{{tab.tabPanelId}}" ng-disabled="tab.disabled">
{{tab.title}}
</b2b-tab>
</b2b-tabset>
<div class="tab-content">
....
</div>
As following the comments i changed the code to this. That did not throw an error, but did not work also:
<b2b-tabset tab-id-selected="vm.activeTabsId" ng-if="vm.selectedUserID" ng-model="vm.activeTabsId" ng-change="vm.changeTab()" >
<b2b-tab ng-repeat="tab in vm.gTabs" tab-item="tab" id="{{tab.uniqueId}}" aria-controls="{{tab.tabPanelId}}" ng-disabled="tab.disabled">
{{tab.title}}
</b2b-tab>
</b2b-tabset>
I am using a route file like this:
appDS2.config(function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: 'app/abcd/scripts/DS2-view-models/user.html',
controller : 'UserController as vm'
})

AngularJS change view in ng-view from a controller

I have a JavaScript web app where I used AngularJS to ease things up, but now I bumped into a little problem.
I want to change viewfrom an ng-controller. I use $location.path to do this, but sadly, nothing happens. If I check the $location object, the path will be changed correctly, but the view isn't changing.
I have an ng-view in my Home.html. This is the config I wrote for it:
<html ng-app="app">
...
<body>
<div id="navigation-menu" ng-controller="NavigatorController">
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
</div>
<div ng-view></div>
</body>
</html>
This is the config I made for the $routeProvider which works flawlessly when used in the menusystem
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.when('/page2', {
templateUrl: 'Page2.html',
controller: 'Page2Controller'
})
.when('/page3', {
templateUrl: 'Page3.html',
controller: 'Page3Controller'
});
});
Upon opening the app I want to show the Page1.html in the ng-view, so that's sorted with the '/' url thing, I guess.
The problem is, that from every other controller, I want to be able to get back to the Page1.html.
I tried making an event in every other controller, like this:
$scope.NavigateBack = function() {
$location.path('/');
}
It's not working, sadly. I don't get any error messages though... I tried it with different addresses in the path, like "/page2", but nothing worked.
What am I doing wrong, that the view isn't changing and the page isn't navigating?
I recommend use
$window.location = "#/"
but don't forgot to inject $window to your controller
Define behaviour in the Page2Controller, for example:
$scope.goBack = function(){
$location.path("#/");
}
And add some button inside of Page2.html:
<button ng-click="goBack()">Return</button>
You might also need to change your navigation links href attribute to #/page2 and #/page3

Is it possible to define ng-include, ng-init, ng-controller in controller

<div
class="row caption-view"
ng-include="'app/views/inventory/grid-view/part.html'"
module="subscriber"
alias="il"
ng-controller="GridController as il"
ng-init="il.setGridParams(cse.gridParams.findCation);
cse.findCaptionGrid = il">
</div>
I have controller ('cse') and in its view i have ng-include with its controller. When everything loaded i can use 'cse.findCaptionGrid' to manipulate with 'GridController' controller.
Problem:
'cse' controller loads and i need to start manipulate with 'GridController' (aka. 'cse.findCaptionGrid') controller. But i cant use 'cse.findCaptionGrid' till ng-include has executed. I tried to use $timeout, but it didnt help. I set timeout to 5000 then it worked.
Question: Is it possible to define 'ng-init="il.setGridParams(cse.gridParams.findCation); cse.findCaptionGrid = il"' part in controller so i can start use it? And in html i just show where this should be shown?
create a directive :
<div my-directive
class="row caption-view"
module="subscriber"
alias="il"/>
angular.module("yourApp").directive('myDirective', [function(){
return {
controller: "GridController as il",
templateUrl: "app/views/inventory/grid-view/part.html"
};
}]);
and inside your controller :
this.setGridParams(cse.gridParams.findCation);
cse.findCaptionGrid = this;

How to hide show in Angular

I am beginner in angular js
HTML
<div ng-app="myapp">
<div ng-controller="maincontrol">
<div ng-show="!vis">show</div>
<div ng-show="vis">hide</div>
</div>
<div ng-view></div>
</div>
JS
var app = angular.module('myapp', ['ngRoute'])
app.controller('maincontrol', function ($scope) {
$scope.vis = true;
$scope.fun = function () {
if ($scope.user == "home" && $scope.pass == "home") {
console.log($scope.user, $scope.pass);
$scope.vis = false;
}
}
})
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/contact', {
templateUrl: 'contact.html'
})
});
and also i have two html pages like
home.html
<div ng-controller="maincontrol">
<input ng-model="user"/>
<input ng-model="pass"/>
<div ng-click="fun()">
click
</div>
</div>
contact.html
<div>
contact
</div>
my expectation is after entering home into user and pass. if i click 'click' i need to show 'show' label instead of 'hide'. pls help me.
Each controller has its own scope, when you wrote $scope.vis=false on fun(), you actually created a new variable on maincontroler1 scope. If you expected this variable to affect the view which is binded to maincontroler scope, it won't happen.
I suggest 2 options:
You can use one controller for entire app (If you use same controller in two tags it will still create a new scope although it is the same controller), this way the fun() method that was called from the first view will change the boolean in the single controller and will affect the second view. Please note when you use ng-view you will have to get the variable from the parent.
So I used this code:
$parent.user
$parent.pass
Create this working plunker for you.
Share the vis boolean between 2 controllers using a service. You can
use this post for this option.
You can also use reach parent controller scope from child controller, that can be done if ng-view will be nested in the outer controller. You can use this post for option 3.

Data binding for dynamically introduced Angular controller

I am an angular beginner & trying to introduce angular in a legacy application. The page structure looks like this
<html ng-app="demoApp">
<div class="static-parent">
<div class="dyanamic" ng-controller="SimpleController">
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
</div>
</html>
The "dyanamic" div is added to dom when a certain button is clicked.
As this controller div is being added dynamically, i tried to load angular afterwards by calling angular bootstrap
angular.bootstrap(document,['demoApp']);
After running the above statement,
3 Li elements are getting created in the dom
But no data is being seen
on the web page. The Li elements are empty
>> angular.element(".dynamic").scope().customers; returns 3 customer objects as expected.
>> angular.element(".dynamic").scope().$apply(); did not help either.
Can you please suggest where I am going wrong? Tried other answers on stackoverflow but didn't seem to help.
Controller code:
//setting up controller
var demoApp = angular.module("demoApp", []);
var controllers = {};
controllers.SimpleController = function($scope){
$scope.customers = [{name:'dave', city:'auckland'},{name:'abe', city:'City2'}, {name:'ram', city:'City3'}];
};
demoApp.controller(controllers);
Code for adding the div dynamically:
var template = Handlebars.compile( $("#template-content-content-container").html() );
$("static-parent").html(template(data));
angular.bootstrap('.page .row', ['demoApp']);
Angular version: 1.0.6
On 1.2.28, calling angular.bootstrap(document,['demoApp']) or angular.bootstrap('.dynamic',['demoApp']);`
is giving
Error: error:btstrpd
App Already Bootstrapped with this Element
Following is the browser screenshot -
Please, check the third (accepted) answer to this: Angular bootstrapping after load of html
(direct link: Loading an AngularJS controller dynamically)
I think, you have to "compile" anything, which is added after a first 'bootstrap' call
Also, I've made this fiddle yesterday to describe my trouble, I think it fits yours.
http://jsfiddle.net/21neg0ox/
var app = angular.module('app', []);
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
//c1
app.controller('c1', ['$scope', '$compile', c1Fn]);
app.controller('c2', ['$scope', '$compile', c1Fn]);
function c1Fn($scope){
$scope.isAlive = 'is alive';
}
setTimeout(wtf, 500);
function wtf(){
var myLovelyHTML = '<div ng-controller="c2">c2 {{isAlive}}</div>';
document.getElementById('c2-wrap').innerHTML = myLovelyHTML;
}

Categories