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

我必须在两个dom元素上使用相同的控制器。我了解到在两个元素上使用ng-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>

你们能指出我所缺少的吗？

最佳答案

function () {highlightService.getDummy(); }应为：

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

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

完整的更新观察者代码：

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) {

  $scope.dummy = newVal;

}, true);