AngularJS:如何在一个控制器中用触发器改变另一个控制器的作用域

AngularJS: how to change scope in one controller with trigger in the other controller

本文关键字：控制器 触发器 改变 作用域 另一个 一个 AngularJS      更新时间：2023-09-26

我有两个控制器和一个共享服务。首先，控制器渲染一些文本。Other Controller有一个按钮，该按钮必须更改First Controllers的作用域并呈现文本(带有新值)

<div ng-controller="Controller1">
  Value is: {{object}}
</div>
<div ng-controller="Controller2">
  <button ng-click="changeValue()">Click to change Value</button>
</div>

JS 

function Controller1($scope, mainServices) {
  $scope.object = mainServices.getValue();
};
function Controller2($scope, mainServices) {
 $scope.changeValue = function(){
   mainServices.getValue('Hello');
   console.log('button is pressed');
 };
};

testApp.factory('mainServices', function(){
 return {
    getValue: function(update) {
     var defaultValue = 'Hi';
     if( typeof(update)==='undefined') {    value = defaultValue;   }
       else {   value = update; }
    console.log('should be changed to', update);
    return value;
   }
}    
 });

On Plunker http://plnkr.co/edit/IWBEvAfvLbzJ0UD2IqGB?p=preview

为什么这个不行?如何让Angular监视变化?

代码

嗯，我认为这不是最好的解决方案，但对于你的问题来说是可能的。而不是仅仅改变值本身，你必须在工厂的返回语句之前创建一个对象。

var obj = {}

然后你只需改变这个对象的一个属性:

if( typeof(update)==='undefined') { obj.val = defaultValue; }
    else {  obj.val = update;   }

并返回对象:

return obj;

另一个控制器可以不受影响，但你必须改变你的html:你必须输入

{{object.val}}

，以听取变化。

http://plnkr.co/edit/rjsrkbaQ8QyWGGFI9HYl?p =

预览

为什么这样做?

这很简单:在javascript中，如果你调用一个函数，它的返回值是一个基本的字符串(是的，字符串在javascript中可以是基本的)，它只是这个基本的副本，所以

$scope.object = mainServices.getValue();

只是传递一个值给$scope。对象，它不受getValue()的其他调用的影响。但是如果我们从getValue()返回一个对象，我们将获得对该对象的引用。所以，如果我们在getValue()中对这个被引用的对象进行了修改，angularjs将能够注意到被修改的对象，因为它在两个控制器中都被跟踪了。因此，我们必须一次又一次地引用同一个对象，但由于javascript支持闭包，这很容易。

相关文章：