AngularJS:两个元素共享同一个控制器-如何强制更新另一个元素的视图？

Question

我的index.html看起来像这样：

<div id="div1" ng-controller="StartMenu">
  <div id="button1" ng-click="doSomething()"></div>
  {{value}}
</div>
<div id="div2" ng-view></div>

模块配置：

angular.module('app').config([$routeProvider, function($routeProvider) {
  $routeProvider.when('/start', {
    templateUrl: 'partials/start.html', controller: StartMenu
  });
}]);

start.html：

<div id="button2" ng-click="doSomething()"></div>
{{value}}

function StartMenu($scope, globals) {    // service globals defined elsewhere
  $scope.value = globals.value
  $scope.doSomething = function() {
    // Manipulate globals.value
    $scope.value = globals.value;
  }
}

问题: index.html中的这两个div元素共享相同的控制器功能。当我点击#div1中的#button1时，doSomething被调用并且$scope.value被改变。更改立即呈现在#div1和{{value}}更改中，但#div2保持不变。如何“强制”#div2呈现并显示{{value}}中的更改？

Answer 1

ng-view创建自己的(子)作用域，因此start.html中的{{value}}是在子作用域上创建的。此value属性在父作用域中隐藏/隐藏同名属性。有几种可能的解决方案：

1. use {{$parent.value}}在start.html
2. 中使用对象，而不是父值上的基元--例如，$scope.obj ={ $scope : 2}。然后在子级中引用它：{{obj.value}}。(好吧，这不适用于您的特定场景，因为父作用域中的值已经引用了其他值。)
3. 在start.html中使用函数：{{ value ()}} --在父作用域上定义该函数。

有关范围继承的更多信息，请参见What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

我读太快了.div1中不包含div2。这个问题是双重的：

1. 正在创建两个控制器，每个控制器在其自己的作用域
2. 上创建自己的value属性如果globals.value是基元，则控制器作用域将获得值的副本，而不是引用。

上面的解决方案2和3适用于这里。

3=使用控制器中的函数访问全局原始值。两种解决方案的小提琴都在下面的评论中。

Answer 2

在这种情况下，您可以将值传递给服务并从服务中获取它

    // controller
    yourservicename.yourfunction = 'somthing text';

    $scope.getvalue = function() {

        return yourservicename.yourfunction;
    }

     // view

    <div ng-controller="myCtrl" > {{getvalue()}} </div>
    <div ng-controller="myCtrl" > {{getvalue()}} </div>