javascript - 在 Angular 中的 dom 元素上使用两次 ng-controller

Question

我必须在两个 dom 元素上使用相同的 Controller 。我了解到在两个元素上使用 ng-controller 将实例化两个实例。我必须在这两个实例之间共享一个变量。所以我所做的是创建一个服务并在 Controller 中分配监视以观察服务中存在的变量。

但我没有看到第二个 Controller 得到更新。

下面是我尝试让它工作的 jsfiddle 链接。

http://jsfiddle.net/jnj6y/251/

JS代码:

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
              // $scope.dummy="main" 
                });
myModule.controller('SFCtrler',function($scope,highlightService) {
$scope.dummy="hi";
 $scope.submit = function(){
     highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };
$scope.$watch(function () {highlightService.getDummy(); },function(newVal, oldVal) { 
        alert(highlightService.getDummy());
        $scope.dummy=highlightService.getDummy();   
        },
        true);  
    });
myModule.service('highlightService', function() {
var dummy ='default';
var setDummy = function(input){
    dummy = input;
}
var getDummy = function(){
    return dummy;
}
 return {       
      setDummy: setDummy,
      getDummy: getDummy    
};
});

HTML 代码:

<div ng-controller="mainCtrler">
<div ng-controller="SFCtrler" > 
     <p>{{dummy}}</p>
            <form id='sf' ng-submit="submit();" >
                <input ng-model="SearchTerm" placeholder="Search current record"  type="text" >
            </form>
        </div>   
<div ng-controller="SFCtrler" > 
<p>{{dummy}}</p>                
        </div>   
</div>

你们能指出我缺少什么吗？

Answer 1

function () {highlightService.getDummy(); } 应该是:

function() {
  return highlightService.getDummy();
}

它需要向$scope.$watch返回一个值。

完整更新的观察者代码:

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);