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

那么当按下Next / Prev按钮时，为什么指令不能从'Controller'获得更新？

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

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

1 个答案: