Javascript 在Angular中对dom元素使用ng控制器两次

我必须在两个dom元素上使用相同的控制器。我了解到在两个元素上使用ng控制器将实例化两个实例。我必须在这两个实例之间共享一个变量。所以我所做的就是创建了一个服务，并在控制器中分配了watch来观察服务中存在的变量

但是我没有看到第二个控制器得到更新

下面是我试图让它工作的JSFIDLE链接

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>

{{dummy}}

{{dummy}}

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

函数（）{highlightService.getDummy（）；}应该是：

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

它需要向

$scope.$watch

返回一个值

完整更新的观察者代码：

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);  

function（）{highlightService.getDummy（）；}

应该是：

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

它需要向

$scope.$watch

返回一个值

完整更新的观察者代码：

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);  

function（）{highlightService.getDummy（）；}

应该是：

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

它需要向

$scope.$watch

返回一个值

完整更新的观察者代码：

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);  

function（）{highlightService.getDummy（）；}

应该是：

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

它需要向

$scope.$watch

返回一个值

完整更新的观察者代码：

$scope.$watch(function () {

  return highlightService.getDummy();

}, function(newVal, oldVal) { 

  $scope.dummy = newVal;  

}, true);  

---

我已经更新了您的JSFIDLE： 您不希望将基元变量作为作用域变量

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
});

myModule.controller('SFCtrler',function($scope,highlightService) {
    $scope.dummy={val: "hi"};
    $scope.submit = function(){
        highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };

    $scope.$watch(function () {
        highlightService.getDummy();
        }, function(newVal, oldVal) { 
            alert(highlightService.getDummy().val);
            $scope.dummy=highlightService.getDummy();   
        }, true);  
});
myModule.service('highlightService', function() {
    var dummy ={val:'default'};
    var setDummy = function(input){
        dummy.val = input;
    }
    var getDummy = function(){
        return dummy;
    }
     return {       
          setDummy: setDummy,
          getDummy: getDummy    
    };
});

以下是更多参考资料：

---

我已经更新了您的JSFIDLE: 您不希望将基元变量作为作用域变量

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
});

myModule.controller('SFCtrler',function($scope,highlightService) {
    $scope.dummy={val: "hi"};
    $scope.submit = function(){
        highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };

    $scope.$watch(function () {
        highlightService.getDummy();
        }, function(newVal, oldVal) { 
            alert(highlightService.getDummy().val);
            $scope.dummy=highlightService.getDummy();   
        }, true);  
});
myModule.service('highlightService', function() {
    var dummy ={val:'default'};
    var setDummy = function(input){
        dummy.val = input;
    }
    var getDummy = function(){
        return dummy;
    }
     return {       
          setDummy: setDummy,
          getDummy: getDummy    
    };
});

以下是更多参考资料：

---

我已经更新了您的JSFIDLE: 您不希望将基元变量作为作用域变量

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
});

myModule.controller('SFCtrler',function($scope,highlightService) {
    $scope.dummy={val: "hi"};
    $scope.submit = function(){
        highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };

    $scope.$watch(function () {
        highlightService.getDummy();
        }, function(newVal, oldVal) { 
            alert(highlightService.getDummy().val);
            $scope.dummy=highlightService.getDummy();   
        }, true);  
});
myModule.service('highlightService', function() {
    var dummy ={val:'default'};
    var setDummy = function(input){
        dummy.val = input;
    }
    var getDummy = function(){
        return dummy;
    }
     return {       
          setDummy: setDummy,
          getDummy: getDummy    
    };
});

以下是更多参考资料：

---

我已经更新了您的JSFIDLE: 您不希望将基元变量作为作用域变量

var myModule = angular.module('myModule', []);
myModule.controller('mainCtrler',function($scope){
});

myModule.controller('SFCtrler',function($scope,highlightService) {
    $scope.dummy={val: "hi"};
    $scope.submit = function(){
        highlightService.setDummy("howdy");
        $scope.dummy=highlightService.getDummy();
    };

    $scope.$watch(function () {
        highlightService.getDummy();
        }, function(newVal, oldVal) { 
            alert(highlightService.getDummy().val);
            $scope.dummy=highlightService.getDummy();   
        }, true);  
});
myModule.service('highlightService', function() {
    var dummy ={val:'default'};
    var setDummy = function(input){
        dummy.val = input;
    }
    var getDummy = function(){
        return dummy;
    }
     return {       
          setDummy: setDummy,
          getDummy: getDummy    
    };
});

以下是更多参考资料：

---

谢谢你指出这一点。现在可以用了。：）这是在两个dom元素上使用相同控制器的最佳方法。还是有更好的替代方案approach@javaMan，控制器应仅存在于一个组件中。服务用于共享功能。你做得很对（根据Angular的说教）。谢谢你的确认谢谢你指出了这一点。现在可以用了。：）这是在两个dom元素上使用相同控制器的最佳方法。还是有更好的替代方案approach@javaMan，控制器应仅存在于一个组件中。服务用于共享功能。你做得很对（根据Angular的说教）。谢谢你的确认谢谢你指出了这一点。现在可以用了。：）这是在两个dom元素上使用相同控制器的最佳方法。还是有更好的替代方案approach@javaMan，控制器应仅存在于一个组件中。服务用于共享功能。你做得很对（根据Angular的说教）。谢谢你的确认谢谢你指出了这一点。现在可以用了。：）这是在两个dom元素上使用相同控制器的最佳方法。还是有更好的替代方案approach@javaMan，控制器应仅存在于一个组件中。服务用于共享功能。你做得很对（根据Angular的说教）。谢谢你的确认这解释了很多。因为在我的代码中，有些地方我没有使用原语，而且代码运行良好。从来没有意识到原语会如此危险。谢谢你的解释这解释了很多。因为在我的代码中，有些地方我没有使用原语，而且代码运行良好。从来没有意识到原语会如此危险。谢谢你的解释这解释了很多。因为在我的代码中，有些地方我没有使用原语，而且代码运行良好。从来没有意识到原语会如此危险。谢谢你的解释这解释了很多。因为在我的代码中，有些地方我没有使用原语，而且代码运行良好。从来没有意识到原语会如此危险。谢谢你的解释