Question

我有一个angularjs应用程序，其中我有两个控制器。我需要通过在第二个控制器中按一下按钮来设置或更新第一个控制器输入字段的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。那怎么解决呢？

Answer 1

删除$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;

    }

})();

Answer 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

Answer 3

根据控制器之间的关系，您可以使用$ 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;
});

从另一个控制器点击按钮更新第一个控制器的ng-model

3 个答案: