使用指令“foo”考虑此标记:
<div foo run="3"></div>
<div foo run="1"></div>
<div foo run="2"></div>
使“foo”以指定顺序而不是从上到下(3,1,2)运行的好方法是什么? 我唯一能想到的就是跟踪已经运行的内容并对不正常的项目返回false,然后使用angular尝试再次运行它们并重复直到它们全部完成。这对我来说听起来很糟糕,因为它必须重复这么多次...... Angular有内置的东西可以使用吗?有没有理想的方法来解决这个问题?
答案 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
指令几乎可以做三件事:
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
内进行。
答案 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);
}
}
}
};
});