AngularJS：如何从另一个控制器更新指令

嗯，我在从控制器更新进度条（在指令中）时遇到了一些问题

以下是一些代码片段： 我的指示：

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();
  }

指令控制器：

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仅隐藏“进度”数量的详细信息：

当然，控制员：

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

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

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模块中的值正在更新，但一旦值更新，指令控制器就永远不会调用getProgress。我建议使用$broadcast和$on发送消息，说明进度已更新。我测试了这个，它似乎成功了

控制器：

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

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

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

谢谢。那确实有效。我的角度知识还没有达到那个水平。