The creation of the controller
AngularJs controller is used everywhere, and the code demonstration is relatively simple to create.
<!DOCTYPE html><html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-"/><title>App</title><script src="angular.js"></script><link href="bootstrap-theme.css" rel="stylesheet" /><link href="bootstrap.css" rel="stylesheet" /><script>angular.module("exampleApp", []).controller("defaultCtrl", function ($scope) {$scope.setInput = function (value) {console.log("print:" + value);}});</script></head><body ng-controller="defaultCtrl"> <div><h>Count</h><div><input required ng-model="value" /><button ng-click="setInput(value)">Click</button></div></body></html>The control is very simple. First, I added the ng-app attribute to html to indicate the scope of the module.
Added ng-controller to the body to represent the scope of the defaultCtrl controller.
The ng-model command in the input note is binding data, two-way data binding (MVVM).
$scope is the built-in scope of AngularJs.
This example is just to print the input value to the console, as shown in the figure:
That's all, it's simple.
Multiple controller scope issues
Now let's modify the program.
<body ><div ng-controller="defaultCtrl"><h>Count</h><div><input required ng-model="value" /><button ng-click="setInput(value)">Click</button></div></div><div ng-controller="defaultCtrl"><h>Count</h><div><input required ng-model="value" /><button ng-click="setInput(value)">Click</button></div></body>
The rest of the code remains unchanged, I just put the property ng-controller put into the body into the two divs. I reused the defaultCtrl controller. I guess if I enter content in the first input tag and I click the button button of the second controller, will the result you expect will appear?
Is the result the same as what you think of you? You can see that the result is undefined. In a good explanation, it should be that their scope is different. Although you reused the unified controller, the scope is indeed different when creating it.
The called factory function will return different scopes.
So how to access between different scopes? In Angularjs, there is a $rootScope for scope access.
Here are three functions to introduce.
$on(name,handler) Register an event handler function that will be called when a specific 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 subscope under the current scope, the parameter is the event name and an object used to provide additional data to the event.
Now 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 ng-controller="defaultCtrl"><h>Count</h><div><input required ng-model="value" /><button ng-click="copy()">Copy</button></div></div>In the segment code I added several functions and changed the functions of the second controller at the same time.
result:
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><h>Count</h><div><input required ng-model="value" /><button ng-click="setInput(value)">Click</button></div><div><div ng-controller="simpleCtrl"><h>Count</h><div><input required ng-model="value" /><button ng-click="copy()">Copy</button></div></div></body>I added a controller, and after careful observation of simpleCtrl, I found that defaultCtrl contains simpleCtrl, so the function simple inherits.
Results: When I posted the input in the first window, the second one also changed, and it should be the same value.
$scope scope problem, you must understand its scope when using controller.