溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
要在控制器之間傳遞變量變化需要使用angular中的$broadcast和$emit方法來傳遞，同時使用$on來接收事件并作出響應。
broadcast譯為廣播，即上級傳遞下級。
示例代碼：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("child", function($scope) {
$scope.$on("parentChange", function(e, m) {
$scope.change = "changed";
$scope.child = m;
})
})
.controller("parent", function($scope) {
$scope.$watch("parent", function(n, o) {
if (n == o) {
return;
}
$scope.$broadcast("parentChange", n)
})
})
</script>
<body>
<div ng-controller="parent">
Parent: {{parent}}
<input type="text" ng-model="parent">
<div ng-controller="child">
{{change}} Child: {{child}}
</div>
</div>
</body>
上述代碼使用$watch監聽parent的值的變化，當發生變化時就會“廣播”出parentChange事件并傳遞了參數（輸入框的值），此時子元素作用域中使用了$scope.$on("parentChange, handler)" 來接收parentChange事件，然后接受輸入框的值并賦值給子作用域中的child變量。 這樣就完成了值的傳遞。
效果：
emit譯為發射，即下級傳遞上級。
示例代碼：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("parent", function($scope) {
$scope.$on("childChange", function(e, m) {
$scope.change = "changed";
$scope.parent = m
})
})
.controller("child", function($scope) {
$scope.$watch("child", function(n, o) {
if (n == o) {
return;
}
$scope.$emit("childChange", n)
})
})
</script>
<body ng-controller="parent">
{{change}} Parent: {{parent}}
<div ng-controller="child">
Child: {{child}}
<input type="text" ng-model="child">
</div>
</body>
當子元素的child值發生變化時，會向上級發出childChange事件，此時父元素正在監聽的$on(“childChange”)會做出響應，將傳遞的參數賦值給parent，整個流程與 broadcast類似。
效果：
上述作用域均存在層級關系，如果對于同級的作用域該如何做呢？
我們可以使用服務來廣播事件：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.service("myServive", function($rootScope) {
return {
change: function(n) {
$rootScope.$broadcast("valueChange", n);
}
}
})
.controller("bro1", function($scope, myServive) {
$scope.$watch("value1", function(n) {
myServive.change(n);
})
$scope.$on("valueChange", function(e, m) {
console.log("value1");
$scope.value1 = m;
})
})
.controller("bro2", function($scope, myServive) {
$scope.$watch("value2", function(n) {
myServive.change(n);
})
$scope.$on("valueChange", function(e, m) {
console.log("value2");
$scope.value2 = m;
})
})
</script>
<body>
<div ng-controller="bro1">
<h4> value1:</h4>
<input type="text" ng-model="value1">
</div>
<div ng-controller="bro2">
<h4>value2:</h4>
<input type="text" ng-model="value2">
</div>
</body>
我們在服務中運用了$rootScope，所有的作用域都從屬于它，基于這點，我們可以在根作用域中廣播事件，$rootScope.$broadcast("valueChange", n);，當每個子作用域中的值發生變化時我們都會調用服務中的change 方法來廣播這個事件，同時每個作用域又都在監聽$on("valueChange") 事件并作出相應處理，這樣就實現了子作用域中的值會傳遞給兄弟作用域了。
效果為：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
