在angular指令中获取ng-repeat complete
Get ng-repeat complete in angular directive
在下面的代码中,angular指令'myscroll'如何知道正在创建哪些ng-repeat元素?
<myscroll>
<div ng-repeat="a in arr">{{a}}</div>
</myscroll>
我知道$last事件没有被触发到父指令,我该如何解决这个问题?
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") })
}
}
})
一个简单的方法是创建一个名为'repeat-done'的新指令,并在'ng-repeat'所在的位置使用它。然后你可以通知'myscroll'指令(父作用域)任何你需要的。
<myscroll>
<div ng-repeat="a in arr" repeat-done>{{a}}</div>
</myscroll>
myapp.directive('repeatDone', [function () {
return {
restrict: 'A',
link: function (scope, element, iAttrs) {
var parentScope = element.parent().scope();
if (scope.$last){
// ng-repeat is completed and you now have access to 'myscroll' scope
console.log(parentScope);
}
}
};
}])
为了防止其他人偶然发现这个问题,我想分享我的解决方案。德鲁兹的回答给我指明了正确的方向,但我采用了一种更"优雅"的方法。
为了给您提供上下文,我需要使用这个带有ng-repeat的系统来填充选择下拉列表中的选项。ng-options与jQuery selected插件不兼容(顺便说一下,自动完成/搜索下拉插件很漂亮!),我需要在所有选项完成渲染后初始化插件。
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');
});
});
}
};
});
可以看到,我只是用我的广播函数扩展了内置的ng-repeat指令。由于这是一个非侵入性的添加,所以我对在ng-repeat的所有使用中实现它没有任何疑虑。
在函数本身中,我使用Angular的$scope.$parent
来获取父上下文,而不是查看$elem.parent().scope()
(这在大多数情况下都可以工作)。
然后广播一个自定义事件(event:repeat-done
),并将最后呈现的repeat元素作为参数传递给父作用域。
我可以在我的自动完成指令中拾取这个事件,并在完全渲染的select元素上初始化我的selected插件!
这种技术可以应用于任何需要检测ng-repeat指令何时完成的情况。例如:
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") })
}
}
})
编辑:在某些情况下,在rootScope中检测这些事件可能是有益的。如果是这种情况,您可以将$scope.$parent.$broadcast
替换为$scope.$emit
,以使事件向上而不是向下气泡
- ng init中的表达式无法使用ng repeat
- Angular ng repeat order将多个字段作为一个字段
- 访问ng repeat中的第一个项目
- Angular js+ng repeat+字母数字索引不起作用
- 如何正确应用Angularjs ng repeat
- AngularJS Navigation (li ng-repeat, create header li), DOM
- 如何使用ng repeat中的选定输入更新我的对象
- 无法使用ng repeat检索动态创建的JSON对象的属性
- 使用 ng-repeat访问 ng 表单元素/值
- Toggle Switch在包含ng model和ng repeat之后不进行切换
- 如何在ng repeat angular js中使用$index
- 在Angularjs中,我如何使用ng repeat、ng model和ng click来动态更改内容
- ng repeat在ng repeat-过滤器不工作
- 在ng repeat中使用带有orderBy的方法
- Angular JS ng-repeat
- 在ng repeat中使ng disabled为true
- AngularJS:如何在ng repeat中使用$index
- 复选框无法正常使用ng repeat,AngularJs
- 如何避免在HTML中使用ng repeat对url名称进行硬编码
- 在angular指令中获取ng-repeat complete