Question

我正在尝试使用隔离范围创建可重用的进度条指令。该指令将具有启动，停止和重置进度条的公共函数。该指令将在ng-repeat

中使用

这是指令的定义：

chatApp.directive('jsProgress', function() {

    var Stopwatch = function(options, updateCallback) {

         // var timer       = createTimer(),
           var   offset, clock, interval;

          // default options
          options = options || {};
          options.delay = options.delay || 1;


          // initialize
          reset();

          function start() {
            if (!interval) {
              offset   = Date.now();
              interval = setInterval(update, options.delay);
            }
          }

          function stop() {
            if (interval) {
              clearInterval(interval);
              interval = null;
            }
          }

          function reset() {
            clock = 0;
           // render(0);
          }

          function update() {
            clock += delta();
           // render();
            updateCallback();
          }

          function delta() {
            var now = Date.now(),
                d   = now - offset;

            offset = now;
            return d;
          }

          // public API
          this.start  = start;
          this.stop   = stop;
          this.reset  = reset;
          this.update = update;
        };



    return {
        restrict : 'AE',
        replace : true,
        scope: { api: '=', key: '@'},
        template: '<div class="dot" ng-attr-id="dots"><ul id="{{key}}" data-currentState="2"><li class="dot-red"></li><li></li><li></li><li></li></ul></div>',
        link : function($scope, elem, attr) {

            var timer = new Stopwatch( {delay: 5000}, updateCallback);
            timer.start();
            function updateCallback()
            {
                var currentCount;
                currentCount = $(elem).find('#' + $scope.key).attr('data-currentState');
                currentCount++;
                $(elem).find('#' + $scope.key).attr('data-currentState',currentCount);
                $(elem).find('#' + $scope.key+' li:nth-child(' + currentCount + ')').addClass('dot-red');

            }

            $scope.api = 
            {
                    reset: function()
                    {
                        timer.reset();
                    },

                    start: function()
                    { 
                        timer.start();
                    },

                    stop: function()
                    {
                        timer.stop();
                    }
                };

        }
    };
});

这是在ng-repeat中使用的方式

<js-progress api="{{activeUserId}}" key="{{activeUserId}}_{{activeCompanyId}}" />

现在我想在ng-repeat中获取一个特定的指令实例，并调用它的公共API来启动，停止和重置特定的进度条。我怎么能这样做？在上面的定义中，它不允许我使用变量{{activeUserId}}，因为我想在ng-repeat中单独引用每个实例。

Answer 1

您正在覆盖此行中从您的Ctrl传递到指令的activeUserId：

$scope.api = {};

我相信您应该以这种方式跟踪控制器中的api对象：

控制器中的

$scope.bars = [
    {
        activeUserId: "id",
        activeCompanyId: "companyId",
        api: {} //this allows angularjs to reuse this object instance
    },
    {
        activeUserId: "id2",
        activeCompanyId: "companyId2",
        api: {} //this allows angularjs to reuse this object instance
    },
];

控制器的html模板

<div ng-repeat="b in bars">
    <js-progress api="b.api" your-extra-params-here />
</div>

稍后在您的控制器中，您将能够：

$scope.bars[0].api.start();

在指令双向数据绑定中引用范围变量

1 个答案: