Question

使用指令“foo”考虑此标记：

<div foo run="3"></div>
<div foo run="1"></div>
<div foo run="2"></div>

使“foo”以指定顺序而不是从上到下（3,1,2）运行的好方法是什么？我唯一能想到的就是跟踪已经运行的内容并对不正常的项目返回false，然后使用angular尝试再次运行它们并重复直到它们全部完成。这对我来说听起来很糟糕，因为它必须重复这么多次...... Angular有内置的东西可以使用吗？有没有理想的方法来解决这个问题？

Answer 1

好的，这是我的解决方案，虽然它更像是一个模板。

<强> Fiddle (check the console log to see the result)

我已将foo指令包装在fooParent指令中，如下所示：

<div foo-parent>
    <div foo run="3"></div>
    <div foo run="1"></div>
    <div foo run="2"></div>
</div>

fooParent指令几乎可以做三件事：

将函数公开给foo项，以便将它们添加到常规列表中
维护foos的列表，该列表将在后链接期间进行排序
按照指定的运行顺序处理每个foo。

看起来像这样：

app.directive('fooParent', function() {
    var foos = [];
    return {
        restrict: 'A',
        controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) {
            this.addFoo = function(runOrder, element) {
                foos.push({
                    run: 1*runOrder, // make sure run is an integer
                    element: element
                });
            };
        }],
        link: function(scope, element, attrs) {
            foos.sort(function(a, b) {
                return a.run - b.run;
            });
            // process all children here
            angular.forEach(foos, function(foo) {
                console.log(foo);
            });
        }
    };
});

foo只是看起来像：

app.directive('foo', function() {
    return {
        restrict: 'A',
        require: '^fooParent',
        link: function(scope, element, attrs, fooParent) {
            fooParent.addFoo(attrs.run, element);
        }
    };
});

显然，您必须找出处理远程加载内容的最佳方法，特别是如果您希望将其连续加载。您的foo指令会变得更加简化，因为加载和处理必须在fooParent内进行。

Answer 2

感谢OverZealous鼓舞我的答案。在这里测试一下。 http://jsbin.com/apumaj/21/edit

html（指令输出将按此顺序显示）

<div foo run="7"></div>
<div foo run="3"></div>
<div foo run="1"></div>
<div foo run="2"></div>

和指令（使指令输出以“运行”顺序加载）应该是不言自明的

app.directive('foo', function() {
  var foos = [];
  var foosLength = document.querySelectorAll('[foo]').length;
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          foos.push({element:element, run:attrs.run});
          if (foos.length === foosLength) {
             foos.sort(function(a, b) {
                return a.run - b.run;
            });
            console.log('ran in this order:');
            for (var i=0; i<foosLength; ++i) {
              //process foos!
              var foo = foos[i];
              console.log(foo.run);
              foo.element.text(foo.run);
            }
          }
        }
    };
});

AngularJS指令 - 设置多个指令元素的顺序（不是指令的优先级，而是元素的优先级）

2 个答案: