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

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

什么是使“foo”按指定顺序而不是从上到下（3,1,2）运行的好方法？

---

我能想到的唯一一件事就是跟踪运行的内容，并在不符合顺序的项目上返回false，然后再次尝试运行它们并重复，直到它们全部完成。这听起来很可怕，因为它会重复很多次。。。Angular是否有可以使用的内置设备？有没有一种理想的方法来处理这个问题？

好的，这是我的解决方案，尽管它更像是一个模板

我将

foo

指令包装在

fooParent

指令中，如下所示：

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

中进行，这要归功于我的回答过于热情。在这里测试一下

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

指令（以“运行”顺序加载指令输出）应该是自解释的

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

app.directive（'foo'，function（）{
var foos=[]；
var foosLength=document.querySelectorAll（'[foo]'）.length；
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
push（{element:element，run:attrs.run}）；
如果（foos.length==foosLength）{
排序（函数（a，b）{
返回a.run-b.run；
});
log（'按此顺序运行：'）；
对于（var i=0；我认为获得更多关于您在foo指令中执行的操作以及顺序如何重要的信息会有所帮助。使用父指令，您可能能够捕获子指令，然后在单独的步骤中处理它们。嗯。这是一个有趣的想法。我将对此进行一点讨论。我的实际操作是什么irective正在加载各种类型的内容，其中一些内容比其他内容重要得多。它实际上是一个插件加载程序，处理控制器/模板的延迟加载。到目前为止，它的加载速度都非常快，但我想在有良好优先级系统的情况下尝试一下。目前，内容只是从上到下加载底部。这可能是一个左侧栏优先于主内容体的问题。我明白了，你是指远程请求的内容，并且你想管理加载顺序？看起来很好。我将在上午深入讨论，看看我得到了什么：）只是提醒一下，元素相互嵌套，这是不可取的。我也得到了2,1,3，而不是3,1,2。哦，当然。我们取消了。哈哈，疲劳在头脑中产生了奇迹：）我纠正了嵌套问题（是的，写起来太晚了），我还更正了run到整数的转换，这将有助于排序。最后，如果您想首先运行最高的运行数，请将排序函数更改为
b.run-a.run
（交换
a
和
b
），我也做了同样的事情：）我有一个想法，我也想尝试一下，只是为了它。我稍后会发布。我选择了这个方法，而不是OverZeous提出的解决方案，因为它不需要非语义和其他不必要的dom元素和额外的指令。它更容易理解/可读，性能应该更好稍微好一点。后来我改变了主意，开始喜欢OverZealous的答案：）选择没有父元素会迫使您使用DOM方法（querySelector）.Side note是当您嵌套了
s时，这两种解决方案都不起作用，除非您想选择它们，而不考虑嵌套深度。角度哲学是将子/父指令与
require
结合使用来定义DOM元素之间的依赖关系。因此我认为@over热心”解决方案更简单nt。@frankvanwijk绝对正确。这就是我为什么将其标记为接受的原因。：）我的答案确实稍微简洁地解决了我的实际问题，因为我需要它是全局的，但使用父元素使其全局化肯定比强制它要好。我当时没有意识到这一点。
<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);
            }
          }
        }
    };
});