I'm using Angular with ui.router and have setup a nested view. The parent view has a div whose visibility I can toggle through a function on the parent controller. I'd like to call this function from the child controller of the nested view. How would I do this?
http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview
JS
angular
.module("myApp", [])
.controller("parent", function($scope) {
$scope.parentFunction = function() {
alert("Called a function on the parent")
};
})
.controller("child", function($scope) {
$scope.childFunction = function() {
alert("Called a function on the child")
};
$scope.parentFromChild = function() {
alert("I know this feels weird");
$scope.parentFunction();
};
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="parent">
<div ng-controller="child">
Call Parent
Call Child
Call Parent from Child
</div>
</div>
</body>
</html>
The scope on controllers is prototypically inherited I believe which means if you don't redefine a function on the scope you get the same function from the parent scope if you call it (the problem is this then makes the assumption about the context of the use of this controller though it's debatable if this is really an issue assuming you don't depend on some effect from that controller in this controller).
Related
I'm learning angularjs. When I learn scope, I see rootScope. But I don't really understand what it is.
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
</body>
</html>
But I don't understand what's the difference between the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.lastname = "Refsnes";
});
</script>
</body>
</html>
So if there is no difference between scope and rootScope, why do we need to use rootScope?
I hope someone can give me a simple example so that I can understand rootScope easily.
I would like to add to #Yaser answer. I will use google chrome console to explain the $rootScope hierarchy which is inherited by all the scopes in the entire web page.
Step 1: Open chrome web developer tool and select the div with ng-app = "myApp"
Step 2: Goto chrome web developer tool's console and type angular.element($0).scope(), this will fetch you an object containing $rootScope details.
Here you will find a property lastname: "Refsnes"
Step 3: Goto Elements tab and select one of the <li>
Step 4: Type angular.element($0).scope() in the console, this will fetch you and object containing selected scope's details
Expand the parent property and you will find rootScope's property lastname: "Refsnes"
This should explain how $rootScope is inherited by all other scopes on the web page
Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.
More info here.
However a very simple explanation is consider rootScope and the original parent of all child scopes. If you imagine a hierarchy the rootScope is at the top.
I case of your example there is no rootScope involved, it is just a perent scope.
So you have a lastname in your parent scope, and since ng-repeat creates a child scope, everyone of them has a lastname as well.
The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.
var app = angular.module('myApp', []);
app.controller('Ctrl1', ['$scope','$rootScope', function ($scope,$rootScope) {
$rootScope.name = "Rahul";
}]);
app.controller('Ctrl2', ['$scope','$rootScope', function ($scope,$rootScope) {
$scope.name = $rootScope.name;
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<div ng-controller="Ctrl1">
<span>{{name}}</span> - controller -1
</div>
<hr>
<div ng-controller="Ctrl2">
<span>{{name}}</span> - controller -2
</div>
</div>
</body>
</html>
var app = angular.module('myApp',[]) [enter image description here][1] //Here rootScope is created only one time
Check structure from the link: - https://i.stack.imgur.com/rzBj3.png
Here is a simple use of rootScope as passing data from one controlleer to another
I am trying to write a service, which will compile HTML for a directive and append it to the body element. While the text is being processed by the directive the functions are not.
Here's a simpler version which I am not able to do the same with ng-click directive and compiling it from the controller. Can anyone please tell me how I can achieve this. My goal is to create a very basic directive similar in functionality to that of modals from angular ui-bootstrap or dialog service from Angular material.
angular
.module('app', [])
.controller('ctrl', ctrl);
function ctrl($scope, $compile) {
var html = '',
newScope = $scope.$new(true),
newScope1 = $scope.$new(true);
$scope.text = 'from controller';
$scope.fun = function() {
alert('from controller');
};
newScope.text = 'from controller with new scope';
newScope.fun = function() {
alert('from controller with new scope');
};
newScope1.text = 'from controller with new scope1';
newScope1.fun = function() {
alert('from controller with new scope1');
};
html = $compile('<button ng-click="fun">{{text}}</button>')($scope);
angular.element('body').append(html);
html = $compile('<button ng-click="fun">{{text}}</button>')(newScope);
angular.element('body').append(html);
$compile('<button ng-click="fun">{{text}}</button>')(newScope1, function(clonedElement, scope) {
console.log(clonedElement, scope);
angular.element('body').append(clonedElement);
});
}
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<h1>Hello Plunker!</h1>
</body>
</html>
plunkr
you're doing it right just call the method use ng-click="fun()" instead of ng-click="fun"(the only thing missing)
html = $compile('<button ng-click="fun()">{{text}}</button>')(newScope);
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
I have got two separate divs as shown in the code below. What I am trying to do is update the Controller from first div and then detect the changes in the second div using the same controller. When I press the button, 'i am here' gets printed on the console but the data in 2nd div won't update. It should change to "clicked".
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>Divs below should not be nested</h1>
<div id="notNested1" ng-controller="Controller1">
<button ng-click="buttonClick()">Click me</button>
</div>
<div id="notNested2" ng-controller="Controller1">
<p>{{paragraph}}</p>
</div>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script>
var app = angular.module('app', []);
function Controller1($scope) {
$scope.paragraph = 'initial';
$scope.buttonClick = function () {
console.log('i am here');
$scope.paragraph = "clicked";
};
}
</script>
</body>
</html>
How can I fix this problem? Also what is the problem here? Is it because the $scope is different for both divs?
Thanks
You should probably share the data using a service/factory.
You could also create a parent controller with the data there, and reference it from the child controllers, but a shared service seems better.
Yes you have 2 separate scopes, so they do not interact with each other.
I have a directive and I want to call a method of the Directive from outside controller . That means when I click a button in the main controller , I want to hide a component in the directive . Is this really possible ,If yes please help me .
Kamal
To call directive methods outside in a controller I would share a directive control object with the controller. Inside the controller you can call methods of this control object and they get executed inside your directive.
create a control object inside your directive
share this control object with the controller using tw data binding
call methods on this control object inside your controller
here is a plunker that demonstrates it: http://plnkr.co/edit/MqN9yS8R5dnqTfjqldwX?p=preview
You can accomplish this by allowing your directive to listen to a scoped property from your controller. Using isolated scope and the =, you can tell your directive what to pay attention to in order to hide its component:
Html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
<button ng-click="action()">Toggle</button>
<the-directive show-component="showIt"></the-directive>
</body>
</html>
JavaScript:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
$scope.showIt = true;
$scope.action = function() {
$scope.showIt = !$scope.showIt;
}
});
myApp.directive('theDirective', function() {
return {
restrict: 'E',
scope: {
'showComponent': '='
},
template: '<div><div ng-show="showComponent">show Me!</div></div>'
}
})
Here is a plunker demonstrating the technique.