单击另一个控制器的按钮时更新第一个控制器的 ng-model答案

【问题标题】：Update ng-model of first controller on click of button from another controller单击另一个控制器的按钮时更新第一个控制器的 ng-model
【发布时间】：2015-08-05 06:48:28
【问题描述】：

我有一个 angularjs 应用程序，其中有两个控制器。我需要通过使用第二个控制器中的按钮的 ng-click 来设置或更新第一个控制器输入字段的 ng-model。由于第一个控制器的 $scope 无法从第二个控制器访问，因此可以使用 $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。那么如何解决呢？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

如果您将使用 $broadcast，您的第二个控制器中将会有类似的内容：

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

在您的第一个控制器中：

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

或者使用 $emit:

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

在您的第一个控制器中：

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

$broadcast -- 向下分派事件给所有子节点

$emit -- 向上调度事件

如果你的控制器之间没有关系，你可以使用 $rootScope 和 $broadcast ，在你的第二个控制器中它看起来像这样：

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

在您的第一个控制器中：

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

【讨论】：

谢谢！！我将使用 $broadcast。我正确理解了 $broadcast 和 $emit ，但是您说“如果您的控制器之间没有关系，您可以使用 $rootScope 和 $broadcast”。这是什么意思？
如果范围之间没有父/子关系，那么您可以使用 $broadcast 和 $rootScope。如果这对您有用，请不要忘记将其标记为已接受的答案；）

【解决方案2】：

您应该为此使用服务，与服务共享简单的值

JS：

angular.module("app",[])
.controller("ctrl1", ["$scope", "commonValues", function($scope, commonValues){
  $scope.commonValues = commonValues;  
}])
.controller("ctrl2", ["$scope", "commonValues",function($scope, commonValues){  
  $scope.changeValue = function(){
    commonValues.testValue="value change";
  }
}])
.service("commonValues", [function(){
  this.testValue = "test";
}]);

HTML：

<div ng-app="app">
  <div ng-controller="ctrl1">{{commonValues.testValue}}</div>
  <div ng-controller="ctrl2">
    <button ng-click="changeValue()">Change</button>
  </div>
</div>

http://codepen.io/anon/pen/PqVbYy

【讨论】：

【解决方案3】：

删除$rootScope 使用正常的$scope 然后向每个控制器注入新服务。

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();

【讨论】：