AngularJS：如何從另一個控制器更新指令

Question

好吧，我在控制器更新進度條（在指令中）時遇到一些問題。

這裏有一些代碼段： 我的指令：

angular.module('TestApp').directive('orderProgress', ['$window', OrderProgress]); 

    function OrderProgress($window) { 

    var directive = { 
     link: link, 
     restrict: 'A', 
     templateUrl: 'OrderProgress.html', 
     controller: 'ProgressController', 
     replace: true 
    }; 
    return directive; 

    function link(scope, element, attrs) {} 
    } 

控制器指令：

function ProgressController($scope, progressNumberService) { 
    $scope.progress = progressNumberService.getProgress(); 
    } 

progressNumberService只是隱藏的細節爲 「進步」 量：

var progress = 20; 
    var progressServiceInstance = { 
    incProgress: function() { 
     progress += 20; 
    }, 
    decProgress: function() { 
     progress -= 20; 
    }, 
    getProgress: function() { 
     return progress; 
    } 
    }; 

    App.value('progressNumberService', progressServiceInstance); 

當然控制器：

function Controller($scope, progressNumberService) { 
    $scope.nextStep = function() { 
     progressNumberService.incProgress(); 
    }; 

    $scope.prevStep = function() { 
     progressNumberService.decProgress(); 
    }; 
    } 

我創建了一個例子： http://plnkr.co/edit/LtY4ZUG591Kd3mUKEmEF?p=catalogue

那麼，爲什麼不將指令得到的「控制器」，當按下下一步/後退按鈕更新？

Answer 1

所以你的問題是價值正在更新您的.value模塊，但您的指令控制器從不調用getProgress一旦更新值。我建議使用$ broadcast和$ on發送消息，說明進度已更新。我測試了這一點，它似乎有伎倆。

控制器：

angular.module('TestApp').controller(controllerId2, ['$scope', '$rootScope', 'progressNumberService', ProgressController]); 

function ProgressController($scope, $rootScope, progressNumberService) { 
    $scope.progress = progressNumberService.getProgress(); 

    $rootScope.$on("event:progress-change", function() { 
    $scope.progress = progressNumberService.getProgress(); 
    }); 
} 

，改變你的.value的一個工廠，所以你可以使用$ rootScope廣播

App.factory('progressNumberService', function($rootScope) { 
    return { 
    incProgress: function() { 
     progress += 20; 
     $rootScope.$broadcast("event:progress-change"); 
    }, 
    decProgress: function() { 
     progress -= 20; 
     $rootScope.$broadcast("event:progress-change"); 
    }, 
    getProgress: function() { 
     return progress; 
    } 
    } 
}); 

這裏是更新Plunker DEMO