If your intention is to get hold of already instantiated controller of another component and that if you are following component/directive based approach you can always require a controller (instance of a component) from a another component that follows a certain hierarchy. For example: //some container component that provides a wizard and transcludes the page … Read more
You need to use $scope.$apply() if you want to make any changes to a scope value from outside the control of angularjs like a jquery/javascript event handler. function change() { alert(“a”); var scope = angular.element($(“#outer”)).scope(); scope.$apply(function(){ scope.msg = ‘Superhero’; }) } Demo: Fiddle
What a great question! I’d love to hear what others have to say, but here are the guidelines I use. The high-altitude premise: scope is used as the “glue” that we use to communicate between the parent controller, the directive, and the directive template. Parent Scope: scope: false, so no new scope at all I … Read more
tl;dr (this tl;dr is from @sp00m‘s answer below) $emit dispatches an event upwards … $broadcast dispatches an event downwards Detailed explanation $rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don’t want every $scope to get it. Mostly a high level communication. Think of it as adults talking to each other … Read more
As @Renan mentioned, ng-include creates a new child scope. This scope prototypically inherits (see dashed lines below) from the HomeCtrl scope. ng-model=”lineText” actually creates a primitive scope property on the child scope, not HomeCtrl’s scope. This child scope is not accessible to the parent/HomeCtrl scope: To store what the user typed into HomeCtrl’s $scope.lines array, … Read more
Variables set at the root-scope are available to the controller scope via prototypical inheritance. Here is a modified version of @Nitish’s demo that shows the relationship a bit clearer: http://jsfiddle.net/TmPk5/6/ Notice that the rootScope’s variable is set when the module initializes, and then each of the inherited scope’s get their own copy which can be … Read more
Writing Components without Watchers This answer outlines five techniques to use to write AngularJS 1.5 components without using watchers. Use the ng-change Directive Use the $onChanges Life-cycle Hook Use the $doCheck Life-cycle Hook Intercomponent Communication with require Push Values from a Service with RxJS Use the ng-change Directive what alt methods available to observe obj … Read more
After AngularJS version 1.3 global controller function declaration is disabled You need to first create an AngularJS module & then attach all the components to that specific module. CODE function Ctrl($scope) { $scope.age = 24; } angular.module(‘app’, []) .controller(‘Ctrl’, [‘$scope’, Ctrl]); Specifically for your case, there is some issue with AngularJS 1.3.14 (downgrade it to … Read more
I created working plunker, showing how to use $scope and UI-Router. The state definition is unchanged: $stateProvider // States .state(“main”, { controller:’mainController’, url:”/main”, templateUrl: “main_init.html” }) .state(“main.1″, { controller:’mainController’, parent: ‘main’, url:”/1”, templateUrl: ‘form_1.html’ }) .state(“main.2”, { controller:’mainController’, parent: ‘main’, url: “/2”, templateUrl: ‘form_2.html’ }) But each state can have different controller. Why? because each … Read more
If your HTML is like below you could do something like this: <div ng-controller=”ParentCtrl”> <div ng-controller=”ChildCtrl”> </div> </div> Then you can access the parent scope as follows function ParentCtrl($scope) { $scope.cities = [“NY”, “Amsterdam”, “Barcelona”]; } function ChildCtrl($scope) { $scope.parentcities = $scope.$parent.cities; } If you want to access a parent controller from your view you … Read more