AngularJS_Basics5_Scope

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="myApp"> <p>The rootScope's favorite color:</p> <h1>{{color}}</h1> <div ng-controller="myCtrl"> <p>The scope of the controller's favorite color:</p> <h1>{{color}}</h1> </div> <p>The rootScope's favorite color is still:</p> <h1>{{color}}</h1> <script> var app = angular.module('myApp', []); app.run(function($rootScope) { $rootScope.color = 'blue'; }); app.controller('myCtrl', function($scope) { $scope.color = "red"; }); </script> <p>Notice that controller's color variable does not overwrite the rootScope's color value.</p> </body> </html>
Local controller scope has high priority.
Local scope doesn't override rootScope(global).

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.