AngularJS：两个元素共享同一个控制器-如何强制更新另一个元素'；你的观点是什么？

My index.html如下所示：

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

start.html：

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

问题是：index.html中的这两个div元素共享同一个控制器函数。当我单击div1中的按钮1时，会调用doSomething并更改$scope.value。更改立即在#div1和{value}更改中呈现，但#div2保持不变。如何“强制”呈现#div2并显示{{value}}中的更改？

ng视图创建自己的（子）范围，因此start.html中的

{{value}}

是在子范围上创建的。此

值

属性隐藏/隐藏父范围中同名的属性。有几种可能的解决方案：

在start.html中使用{{$parent.value}}

在父$scope上使用对象而不是原语——例如，$scope.obj={value:2}。然后在子对象中引用它：{{obj.value}。（好吧，这不适用于您的特定场景，因为父范围中的值已经引用了其他内容。）

在start.html中使用函数：{{value（）}}--在父作用域上定义该函数

有关作用域继承的更多信息，请参见

更新：我读HTML太快了。。。div2不包含在div1中。问题有两个方面：

正在创建两个控制器，每个控制器在自己的作用域上创建自己的

值
属性

如果

globals.value

是原语，那么控制器作用域将获取值的副本，而不是引用

上述解决方案2和3适用于此处。
2=在全局上创建一个对象，并在控制器作用域中引用该对象的属性（即，不使用原语）。

---

3=使用控制器中的函数访问全局基元值。这两种解决方案的提琴都在下面的注释中。

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

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

    $scope.getvalue = function() {

        return yourservicename.yourfunction;
    }

     // view

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

//控制器
yourservicename.yourfunction='somthing text'；
$scope.getvalue=function（）{
返回yourservicename.yourfunction；
}
//看法
{{getvalue（）}}
{{getvalue（）}}

感谢您的回复和其他地方的详细解释。我尝试将{$id}放在#div1和#div2中，实际上，它们是不同的作用域。但是在start.html中引用$parent.value不起作用。为什么ng view应该为#div1的作用域而不是$rootScope创建子作用域？你是对的，div2不在div1下，所以div2的父作用域很可能是根作用域--对不起，我没有仔细查看你的HTML$家长不会在这里工作（正如您已经发现的）。我很确定你的问题是你实际上创建了两个StartMenu控制器——一个是通过ng控制器，另一个是通过ng视图。（与服务不同，服务是单例的，控制器不是单例的。）每个控制器都有自己的作用域。因此，div2在其作用域上创建了一个“value”属性，这与在div1的作用域上创建的“value”属性不同。解决此问题的一种方法是在控制器中定义一个“value（）”函数，该函数从服务返回值。这是一把小提琴：。每个$digest周期，value（）函数都会对每个控制器求值一次。另一个修复方法是在服务中使用对象，而不是原语。这样，控制器不会在其作用域中创建值的副本，而是获取引用。Fiddle：如果$scope.value现在是对globals.value的引用，$scope.value.value+=10是否会实际增加globals.value.value？

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

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

    $scope.getvalue = function() {

        return yourservicename.yourfunction;
    }

     // view

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