AngularJS $ scope未在DOM中更新

Question

I have the following codes :

The state (lets just make it short for simplicity purposes)

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

The controller

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

template.html

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

Other html partial

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

I have a scope variable on my controller . The 2-way binding is working fine on the template that was declared on the state together with the controller . But not on the other partial template where in I binded the controller using the ng-controller .

Is this some kind of bug? Or am I missing something? Thanks.

Answer 1

You have one Controller but two instances of that controller. Each time you use ng-controller or declare it in differents views a new instance is created, so all controllers are in differents scopes. The best way to share data between controller are services, because these are singleton, so they have one instance. Example:

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