javascript - 从另一个 Controller 单击按钮时更新第一个 Controller 的 ng-model

Question

我有一个 angularjs 应用程序，其中有两个 Controller 。我需要通过使用第二个 Controller 中的按钮的 ng-click 来设置或更新第一个 Controller 输入字段的 ng-model。由于第一个 Controller 的 $scope 无法从第二个 Controller 访问，因此可以使用 $scope 来完成。我尝试使用 $rootScope 。这是example fiddle .

var myApp = angular.module('myApp',[]);
function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

function MyCtrl2($scope, $rootScope) {
 $scope.myclick = function()
 {
    $rootScope.name = "myname";
 }
}

html代码

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="name" ng-change="ontxtchange(name)"></input>
</div>
<div ng-controller="MyCtrl2">

  <button ng-click="myclick()">click</button>
</div>

如果我单击按钮 ng-model 会更新。但是如果我在单击按钮之前对文本框进行任何更改，则 $rootScope 将不会更新 ng-model。那么如何解决呢？

Answer 1

您可以根据 Controller 之间的关系使用 $broadcast 或 $emit 。

如果您将使用 $broadcast，您的第二个 Controller 中将会有类似的内容:

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

在你的第一个 Controller 中:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

或者使用 $emit:

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})

在你的第一个 Controller 中:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$broadcast -- 将事件向下分派(dispatch)给所有子级

$emit -- 向上调度事件

如果您的 Controller 之间没有关系，您可以使用 $rootScope 和 $broadcast ，在您的第二个 Controller 中，它将如下所示:

 $rootScope.$broadcast('eventName', value);

在你的第一个 Controller 中:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});