javascript - AngularJS $scope 没有在 DOM 中更新

Question

我有以下代码:

状态(为了简单起见，让它简短一些)

.state('foo', {
    url: '/foo',
    templateUrl: 'path/to/template.html',
    controller:'fooCtrl',
})

Controller

controller = function($scope){
    // not the actual code
    $scope.barCount
}

template.html

<div>
    <span>{{ barCount }}</span> // this is updating properly
</div>

其他html部分

<div ng-controller="fooCtrl">
    <span>{{ barCount }}</span> // this is **NOT** updating properly
</div>

我的 Controller 上有一个scope 变量。双向绑定(bind)在 template 上工作正常，该模板与 controller 一起在 state 上声明。但不是在我使用 ng-controller 绑定(bind) controller 的其他部分模板上。

这是某种错误吗？或者我错过了什么？谢谢。

Answer 1

您有一个 Controller ，但该 Controller 有两个实例。每次您使用 ng-controller 或在不同的 View 中声明它时，都会创建一个新实例，因此所有 Controller 都在不同的范围内。在 Controller 之间共享数据的最佳方式是服务，因为它们是单例的，所以它们只有一个实例。示例:

angular.module('app')

.factory('fooService', [function(){
  var bar = 'Shared Data';
  return {
    getBar: function(){
      return bar;
    }
  };
}])

.controller('FooController', ['fooService', function(fooService){
  this.barCount = fooService.getBar();
  // or use $scope.barCount = fooService.getBar();
}];