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