Creation of Controller
ANGULARJS controller use is ubiquitous, in which the code demonstrates relatively simple creation work.
<!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 class="well">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
</body>
</html>
In this control is simple, first I added the Ng-app attribute in HTML to represent the scope of module.
A ng-controller is added to the body to represent the scope of the Defaultctrl controller.
The ng-model instruction in input notes is binding data, bidirectional data binding (MVVM).
$scope is the ANGULARJS built-in scope.
This instance simply prints the input values to the console, as shown in the figure:
That's it, it's easy.
Multiple controllers controller scope problems
Now we're going to change the program,
<body > <div class="well" ng-controller="defaultCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> <div class="well" ng-controller="defaultCtrl"> <h>Count</h> <div class="form-group"> <input class="form-control" required ng-model="value" /> <button ng-click="setInput(value)">Click</button> </div> </div> </body>
The rest of the code doesn't change, I just put the attribute ng-controller into the body into two div. I reused the Defaultctrl controller, assuming that if I typed in the first Input tab, would I click on the button on the second controller to show you what you expected?
The result is the same as you think you, you can see this result is undefined. In a good explanation, it should be different for their scope, although you reuse the unified controller, but in creating scopes it is really different.
The Calling factory function returns a different scope.
So how do you access between different scopes, there's a $rootscope for scoping access in Angularjs.
Here are three functions that need to be introduced,
$on (Name,handler) registers an event-handling function that will be invoked 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 a child scope under the current scope, which is the event name and an object that provides additional data to the event.
Now to 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">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
In the section code I added several functions, while changing 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">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
<div class="well" ng-controller="simpleCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>
</body>
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, should be the same value.
$scope scope problem, you should understand its scope when using controller.
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
