0

我的 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
  });
}]);

开始.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}} 的变化？

4

2 回答 2

2

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

  1. 在 start.html 中使用 {{$parent.value}}
  2. 在父 $scope 上使用对象而不是原语——例如，$scope.obj = {value: 2}。然后在孩子中引用它：{{obj.value}}。（好吧，这不适用于您的特定场景，因为父范围中的值已经引用了其他内容。）
  3. 在 start.html 中使用一个函数：{{value()}}——在父作用域上定义该函数。

有关范围继承的更多信息，请参阅AngularJS 中范围原型/原型继承的细微差别是什么？

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

  1. 正在创建两个控制器，每个控制器都在value自己的范围内创建自己的属性
  2. 如果globals.value是原语，那么控制器作用域将获取值的副本，而不是引用。

上面的解决方案 2 和 3 适用于此。
2 = 在全局变量上创建一个对象并在控制器范围内引用该对象的属性（即，不要使用原语）。
3 = 使用控制器中的函数来访问全局原始值。两种解决方案的小提琴都在下面的评论中。

于 2013-01-14T20:38:48.020 回答
0

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

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

    $scope.getvalue = function() {

        return yourservicename.yourfunction;
    }

     // view

    <div ng-controller="myCtrl" > {{getvalue()}} </div>
    <div ng-controller="myCtrl" > {{getvalue()}} </div>
于 2015-10-22T07:16:24.313 回答