AngularJS指令 - 设置多个指令元素的顺序(不是指令的优先级,而是元素的优先级)

时间:2013-08-05 02:42:44

标签: javascript angularjs angularjs-directive element order-of-execution

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

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

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

2 个答案:

答案 0 :(得分:3)

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

<强> 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指令几乎可以做三件事:

  1. 将函数公开给foo项,以便将它们添加到常规列表中
  2. 维护foos的列表,该列表将在后链接期间进行排序
  3. 按照指定的运行顺序处理每个foo
  4. 看起来像这样:

    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内进行。

答案 1 :(得分:3)

感谢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);
            }
          }
        }
    };
});