当从另一个控制器点击按钮时，更新第一个控制器的ng模型

Update ng-model of first controller on click of button from another controller

本文关键字：控制器 第一个 更新 ng 模型 按钮 另一个      更新时间：2023-09-26

我有一个angularjs应用程序，我有两个控制器。我需要设置或更新第一个控制器输入字段的ng-模型通过使用第二个控制器的一个按钮的ng-click。由于第一个控制器的$scope不能从第二个控制器访问，所以可以使用$scope来完成。我尝试使用$rootScope。这是一个例子。

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。那么如何解决这个问题呢?

你可以使用$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;
});

你应该使用service，简单的与service共享值

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

移除$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;
    }
})();
相关文章：