Home > Developer > Web Develop
The AngularJs controller is used everywhere, where the code demonstrates relatively simple creation work.
<! DOCTYPE html>In this control is very simple, first I added the HTML Ng-app attribute, indicating the scope of the module.
A ng-controller is added to the body to represent the scope of the Defaultctrl controller.
The Ng-model directive in the input note is bound data, bidirectional data binding (MVVM).
$scope is the ANGULARJS built-in scope.
This instance simply prints the input value to the console,
That's it, easy.
Controller-scoped issues for multiple controllersNow let's change the procedure.
<body > <div class= "Well" ng-controller= "Defaultctrl" >The rest of the code doesn't change, I just put the attribute Ng-controller in the body into two div. I reused the Defaultctrl controller, guessing, if I enter the content in the first input tag, I click on the button of the second controller, will I see the result you expect?
If the result is the same as what you think you are, you can see the result as undefined. In a good explanation, it should be different for their scopes, although you re-used the unified controller, but the creation scope is really different.
The called factory function returns a different scope.
So how to access the different scopes, there is a $rootscope in Angularjs for scope access.
Here are three functions to be introduced,
$on (Name,handler) registers an event handler that will be called when a particular event is received by the current scope .
$emit (Name,args) sends an event to the current parent scope until the root scope.
$broadcast (Name,args) sends an event to the child scope under the current scope, which is the event name and an object that is used to provide additional data to the event.
Now let's change the following code:
<script> angular.module ("Exampleapp", []) . Controller ("Defaultctrl", Function ($scope, $rootScope) { $scope. $on ("Updatevalue", Function (event, args) { $scope. input = Args.zip; }); $scope. SetInput = function (value) { $rootScope. $broadcast ("Updatevalue", {zip:value}); Console.log ("Print:" + $scope. Input); } $scope. copy = function () { console.log ("copy:" + $scope. Input);}; }); </script>
<div class= "Well" ng-controller= "Defaultctrl" >In the segment code I added several functions and changed the function of the second controller.
Results:
It did happen.
Controller inheritance<script> angular.module ("Exampleapp", []) . Controller ("Defaultctrl", Function ($scope, $rootScope) { //$scope. $on ("Updatevalue", Function (event, args) { // $scope. Input = Args.zip; //}); $scope. SetInput = function (value) { //$rootScope. $broadcast ("Updatevalue", {zip:value}); $scope. Input = value; Console.log ("Print:" + $scope. Input); } $scope. copy = function () { console.log ("copy:" + $scope. Input);} ; }) . Controller ("Simplectrl", function ($scope) { $scope. copy = function () { console.log ("copy:" + $scope. Input); }; }); </script>
<body ng-controller= "Defaultctrl" > <div class= "Well" >I added a controller, Simplectrl carefully observed, found that Defaultctrl contains Simplectrl, so the role of simple also inherited.
Result diagram: When I enter in the first window, the second one also changes and should be the same value.
$scope scope problem, understand its scope when using a controller.
AngularJs (v) talk about $scope scopes from controller controllers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
