AngularJS溝通事件/從服務更改爲控制器

我試圖在兩個控制器之間進行通信。我知道這可以通過引發一個事件，然後使用$ rootScope。$ broadcast來完成，但對於大型應用程序不適用。我見過很多博客文章，建議使用服務進行溝通，但無法成功實施。我實際的代碼更復雜，但這裏的要點是：AngularJS溝通事件/從服務更改爲控制器

HTML：

<body ng-app="app"> 
    <div ng-controller="MainCtrl"> 
     <span>Source: {{count}}</span> 
     <button ng-click="updateCount()">Increase Count</button> 
    </div> 
    <div ng-controller="ListCtrl"> 
     Destination: {{updatedCount}} 
    </div> 
</body>

JS：

(function() { 

    var app = angular.module("app", []); 

    app.factory("ShareDataSvc", function ($log) { 

     var currentCount = 0; 

     var set = function (val) { 
      $log.info('Setting service value to: ' + currentCount); 
      currentCount = val; 
     } 

     var get = function() { 
      return currentCount; 
     } 

     return { 
      set: set, 
      get: get 
     } 
    }); 

    app.controller("MainCtrl", ['$scope', 'ShareDataSvc', function ($scope, ShareDataSvc) { 
     $scope.count = ShareDataSvc.get(); 
     $scope.updateCount = function() { 
      $scope.count = $scope.count + 1; 
      ShareDataSvc.set($scope.count); 
     } 
    }]); 

    app.controller("ListCtrl", ["$scope", "ShareDataSvc", function ($scope, ShareDataSvc) { 
     $scope.updatedCount = ShareDataSvc.get(); 

     // trigger alert if count updated 
     $scope.triggerAlert = function() { 
      alert('Count updated!'); 
     } 
    }]); 
}());

我試圖理解爲什麼在目的地的計數不更新儘管Angular是數據綁定的，我的理解是，當計數在SharedDataSvc中更新時，updatedCount屬性將被重新計算。我在這裏做錯了什麼？最終結果是在每次更新計數時觸發警報。

來源

2015-07-20 JSRookie

您遇到了舊的副本的價值問題。當你做

$scope.updatedCount = ShareDataSvc.get();

更新的計屬性被設置爲從您的get函數返回，因此不會看到你的服務被跟蹤的價值未來變化的值。你有兩個選擇來解決這個問題。一種方法是將手錶添加到每個控制器，以監視服務中的值。不理想。第二種方法是讓服務中的對象屬性跟蹤值並將數據綁定到您的作用域。喜歡的東西（注意我只顯示了有趣的部分）：

app.factory("ShareDataSvc", function ($log) { 

    var set = function (val) { 
     $log.info('Setting service value to: ' + currentCount); 
     this.data.count = val; 
    } 

    return { 
     data: {count: 0} 
     set: set 
    } 
}); 

app.controller("MainCtrl", ['$scope', 'ShareDataSvc', function ($scope, ShareDataSvc) { 
    $scope.data = ShareDataSvc.data; 
    $scope.updateCount = function() { 
     ShareDataSve.data.count++; // and increment function in the service would be better 
    } 
}]); 

app.controller("ListCtrl", ["$scope", "ShareDataSvc", function ($scope, ShareDataSvc) { 
    $scope.data = ShareDataSvc.data; 

}]);

然後在你的HTML

<body ng-app="app"> 
    <div ng-controller="MainCtrl"> 
     <span>Source: {{data.count}}</span> 
     <button ng-click="updateCount()">Increase Count</button> 
    </div> 
    <div ng-controller="ListCtrl"> 
     Destination: {{data.count}} 
    </div> 
</body>

來源

2015-07-20 04:31:36

啊..我看到的問題。綁定到實際值會更新目標中的計數。但我仍然不確定如何觸發警報。 $是唯一的選擇嗎？ – JSRookie

這取決於你的用例。如果您需要知道控制器何時發生變化，那麼您需要有一個手錶，或者從您的控制器中可以監聽的服務在rootScope上發出一個事件（然後是手錶的更高性能）。 –

您是否需要示例或說明足以讓您走？ –

AngularJS溝通事件/從服務更改爲控制器

回答

相關問題