获取NG重复完整的角度指令 [英] Get ng-repeat complete in angular directive
问题描述
在下面的code，如何角指令'myscroll知道需要创建什么NG重复的元素呢？
＆LT; myscroll＆GT;
＆LT; DIV NG重复=一个在ARR＆GT; {{A}}＆LT; / DIV＆GT;
＆LT; / myscroll＆GT;
我知道$最后一个事件是不是被炒到父的指令，我怎么能解决这个问题？
myapp.directive（myscroll功能（）{
返回{
限制：E，
transclude：真实，
模板：＆LT;跨度类='左'＆GT;＆LT; / SPAN＆GT;＆LT; DIV CLASS ='面具'NG-transclude＆GT;＆LT; / DIV＆GT;＆LT;跨度类='右'＆GT;＆LT; / SPAN＆GT;
链接：功能（范围，元素，属性）{ 范围。$表（$最后一个，函数（）{的console.log（NG重复渲染）}） }
}
}）
就在就这个问题情况下，别人跌倒，我想分享我的解决方案。 dluz的回答我指出了正确的方向，但我还是把更多的'优雅'的做法。
为了让你的背景下，我需要使用该系统NG-重复填充在选择下拉菜单中的选项。有与该拣选的jQuery插件（美丽的自动完成/搜索下拉插件NG选项不兼容，由方式！），我需要初始化插件一旦所有的选项都完成渲染。
HTML
＆LT;选择自动完成NG模型=东西＆GT;
＆LT;选项NG重复=项中的项目VALUE ={{item.value}}＆GT; {{item.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT;
JavaScript的：
内置ngRepeat指令 //扩建工程 - 广播其父完成时。
//传递呈现为事件参数的最后一个元素。
app.directive（'ngRepeat'，函数（）{
返回{
限制：'A'，
链接：功能（$范围，$ ELEM，$ ATTRS）{
如果（$范围。$最后一个）
。$ $范围父广播$（'事件：重复 - 做'，$ ELEM）。
}
};
}）;//我的指令为与所选择的插件工作。
app.directive（自动完成，函数（）{
返回{
限制：'A'，
链接：功能（$范围，$ ELEM，$ ATTRS）{
$ $范围在（'事件：重复 - 做'，函数（）{
的setTimeout（函数（）{
如果（$ elem.children（！'：第一胎。）是（'[残疾人]'））
。$ ELEM prePEND（'＆LT;选项禁用=禁用＆GT;＆LT; /选项＆GT;'）;
$ elem.chosen（{disable_search_threshold：10，宽度：100％}）;
$ elem.trigger（'选择：更新'）;
}）;
}）;
}
};
}）;
正如你所看到的，我只是延长了内置的与我的广播功能NG重复指令。因为它是一种非侵入性另外，我有落实到NG-重复的所有使用这个没有任何疑虑。
在函数本身，而不是在看 $ elem.parent（）范围（）（这可能 - 在大多数情况下会 - 工作），我使用角的 $范围。$父来获取父上下文。
然后我广播自定义事件（事件：重复-完成），并通过最后呈现的重复元素作为参数传递给父范围
我可以再拿起这个事件在我的自动完成指令，并通过完全呈现的选择元素初始化我选择的插件！
此技术可以再是一般应用到你需要的时候NG-重复指令进行检测的任何时间。为了您的例子：
myapp.directive（myscroll功能（）{
返回{
限制：E，
transclude：真实，
模板：＆LT;跨度类='左'＆GT;＆LT; / SPAN＆GT;＆LT; DIV CLASS ='面具'NG-transclude＆GT;＆LT; / DIV＆GT;＆LT;跨度类='右'＆GT;＆LT; / SPAN＆GT;
链接：功能（范围，元素，属性）{
范围在$（事件：重复 - 完成功能（）{执行console.log（NG重复渲染）}）
}
}
}）
编辑：对于一些情况下可能是有益的rootScope以检测这些事件一路。如果是这样的话，你可以替换 $范围。$父。$广播与 $范围。$发出来有事件冒泡不降反升。
In the code below, how does the angular directive 'myscroll' know what ng-repeat elements are being created?
<myscroll>
<div ng-repeat="a in arr">{{a}}</div>
</myscroll>
I know that the $last event is not fired to the parent directive, how can I solve this?
myapp.directive("myscroll", function () {
return{
restrict: "E",
transclude: true,
template: "<span class='left'></span><div class='mask' ng-transclude></div><span class='right'></span>",
link: function (scope, element, attr) {
scope.$watch("$last",function(){ console.log("ng-repeat rendered") })
}
}
})
Just in case someone else stumbles upon this question, I wanted to share my solution. dluz's answer pointed me in the right direction, but I took a more 'elegant' approach.
To give you context, I needed to use this system with ng-repeat to populate the options in a select dropdown. There was an incompatibility with ng-options with the jQuery Chosen plugin (beautiful autocomplete/search dropdown plugin, by the way!), and I needed to initialize the plugin once all the options were finished rendering.
HTML:
<select auto-complete ng-model="stuff">
<option ng-repeat="item in items" value="{{ item.value }}">{{ item.name }}</option>
</select>
JavaScript:
// Extension of built-in ngRepeat directive - broadcasts to its parent when it is finished.
// Passes the last element rendered as an event parameter.
app.directive('ngRepeat', function () {
return {
restrict: 'A',
link: function ($scope, $elem, $attrs) {
if ($scope.$last)
$scope.$parent.$broadcast('event:repeat-done', $elem);
}
};
});
// My directive for working with the Chosen plugin.
app.directive('autoComplete', function () {
return {
restrict: 'A',
link: function ($scope, $elem, $attrs) {
$scope.$on('event:repeat-done', function () {
setTimeout(function () {
if (!$elem.children(':first-child').is('[disabled]'))
$elem.prepend('<option disabled="disabled"></option>');
$elem.chosen({ disable_search_threshold: 10, width: '100%' });
$elem.trigger('chosen:updated');
});
});
}
};
});
As you can see, I simply extended the built-in ng-repeat directive with my broadcaster function. Since it's a non-invasive addition, I have no qualms with implementing this into all uses of ng-repeat.
Within the function itself, instead of looking at $elem.parent().scope() (which could - and in most situations would - work), I use Angular's $scope.$parent to fetch the parent context.
Then I broadcast a custom event (event:repeat-done), and pass the last rendered repeat element as a parameter to the parent scope.
I could then pick up this event in my auto-complete directive and initialize my Chosen plugin over the fully-rendered select element!
This technique could then be generically applied to any time you need to detect when an ng-repeat directive is done. For your example:
myapp.directive("myscroll", function () {
return{
restrict: "E",
transclude: true,
template: "<span class='left'></span><div class='mask' ng-transclude></div><span class='right'></span>",
link: function (scope, element, attr) {
scope.$on("event:repeat-done",function(){ console.log("ng-repeat rendered") })
}
}
})
EDIT: For some cases it may be beneficial to detect these events all the way up at the rootScope. If this is the case, you could replace $scope.$parent.$broadcast with $scope.$emit to have the event bubble up instead of down.
这篇关于获取NG重复完整的角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
