AngularJS：$ on不起作用
[英]AngularJS: $on doesn't work
問題描述
我正在嘗試使用AngularJS在模式窗口中編輯用戶名，但是，在第二個控制器中使用“ update（）”函數后，名稱保持不變。 $scope.closeThisDialog(); 工作正常。 $on和$emit什么問題？
我的服務：
'use strict';
var myService = function () {
var user = { name: "Peter", surname: "Pitt"};
var service = {};
service.user = user;
return service;
};
module.exports = [myService];
第一控制器：
'use strict';
var FirstController = function ($scope, myService, ngDialog) {
$scope.user = myService.user;
$scope.openModal = function () {
ngDialog.open({templateUrl: 'myTemplate'});
};
$scope.$on("updateUser", function(event, data){
$scope.user = data;
});
};
module.exports = ['$scope', 'myService', 'ngDialog', FirstController];
第二個控制器：
'use strict';
var SecondController = function ($scope, myService, ngDialog) {
$scope.editedUser = angular.copy(myService.user);
$scope.update = function () {
$scope.$emit("updateUser", $scope.editedUser);
$scope.closeThisDialog();
};
};
module.exports = ['$scope', 'myService', 'ngDialog', SecondController];
索引文件：
<html>
<body ng-app="">
<div ng-controller="FirstController">
<a ng-click="openModal()">Edit</a>
Name: {{user.name}} </br>
Surname: {{user.surname}}
</div>
</body>
</html>
和模式窗口：
<script type="text/ng-template" id="edit">
<form ng-controller="SecondController">
<input ng-model="editedUser.name">
<input ng-model="editedUser.surname">
<button ng-click="update()">Submit</button>
</form>
</script>
3 個解決方案
解決方案1
0 2015-03-31 19:36:52
這是因為$emit僅回顯作用域鏈中的事件。 因此，您的第一個控制器只會聽到它的作用域是第二個控制器的父級（或父級父級等）。
為了使該事件正常運行，您必須在第一個控制器中使用$rootScope.$on （捕獲所有發生的事情），或者在第二個控制器中使用$rootScope.$broadcast （將事件發送到每個子范圍）。
解決方案2
0 2015-03-31 19:42:20
如果您只想通過替換替換FirstController中的數據，也可以不使用$ emit和$ broadcast來執行此操作
$scope.update = function () {
$scope.$emit("updateUser", $scope.editedUser);
$scope.closeThisDialog();
};
};
與
$scope.update = function () {
angular.copy($scope.editedUser,myService.user);
$scope.closeThisDialog();
};
});
你可以在這里看到一個工作的小提琴
解決方案3
0 已采納 2015-03-31 19:49:11
看起來您需要將$ scope傳遞到ngDialog.open以便在與您正在偵聽的范圍相同的范圍內發射：
ngDialog.open({ template: 'myTemplate', scope: $scope });
當然，由於您現在正在共享相同的作用域，因此您應該只能夠直接在模式中編輯$scope.user ，而根本不用擔心發出/監聽事件；）
$（this）在angularJS中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.