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="api1" key="{{activeUserId}}_{{activeCompanyId}}" />

现在我想在ng-repeat中获取一个特定的指令实例，并调用它的公共API来启动，停止和重置特定的进度条。我怎么能这样做？

Answer 1

您可以尝试这样的事情：

JS

// array of progress bars
$scope.progressBars = [{id: 0}, {id: 1}];

// Call the api with the instance index, for example
$scope.progressBars[0].start();

标记

<div ng-repeat="progressBar in progressBars track by $index>
    <js-progress api="progressBars[$index]" key="{{activeUserId}}_{{activeCompanyId}}" />
</div>

所以这里的重点是每次重复都会传递一个不同的api属性。

Plunker

访问多个指令的隔离范围

1 个答案: