Transmission value between controllers
1. Pass values from parent scope to child scope
-Broadcast: broadcast from parent scope to child scope -$on() capture events
<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>2. Pass values from child scope to parent scope
-Emitted: emitted from child scope up to parent scope (equivalent to bubbling) -$on() capture events
<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>3. - level range resolve pass value
-Use resolve to pass values, passing an object -The name of the passed object needs to be injected and then used
resolve: {
academicInfo: function () {
if (type === 'add') {
return null
} else if (type === 'edit') {
return academic
}
}
}4. Use root scope ($rootscope)
-$rootscope is equivalent to a global variable, which is available under the same angular.module("exampleApp")
-$rootscope needs to be injected into the controller before it can be used
5. Use service service
-Under the same module, different controllers can access the same service -The value of the controller can be transferred through the storage and transfer of the value in the service
Full demo:
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Controllers</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.service("ZipCodes", function($rootScope) {
return {
setZipCode: function(type, zip) {
this[type] = zip;
$rootScope.$broadcast("zipCodeUpdated", {
type: type, zipCode: zip
});
}
}
})
.controller("simpleCtrl", function ($scope, ZipCodes) {
$scope.$on("zipCodeUpdated", function (event, args) {
$scope[args.type] = args.zipCode;
});
$scope.setAddress = function (type, zip) {
ZipCodes.setZipCode(type, zip);
console.log("Type: " + type + " " + zip);
}
$scope.copyAddress = function () {
$scope.zip = $scope.billingZip;
}
});
</script>
</head>
<body>
<div class="well" ng-controller="simpleCtrl">
<h4>Billing Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="zip">
</div>
<button class="btn btn-primary" ng-click="setAddress('billingZip', zip)">
Save Billing
</button>
</div>
<div class="well" ng-controller="simpleCtrl">
<h4>Shipping Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="zip">
</div>
<button class="btn btn-primary" ng-click="copyAddress()">
Use Billing
</button>
<button class="btn btn-primary" ng-click="setAddress('shippingZip', zip)">
Save Shipping
</button>
</div>
</body>
</html>The value transmission scheme of angularjs controller in the above five middle schools should be sufficient in the work. Well, I like it:)