![DropDown]( "DropDown")
本文介绍了指令链接函数无法访问整个模板 DOM的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个指令，它有一个递归包含一个模板的模板.在我的指令链接函数中，我无法使用选择器获取完整的 DOM.
这是我的指令.请注意，我的指令尝试在构造的所有 .ui.dropdown div 上调用 dropdown() 函数，以便激活嵌套下拉列表.
.directive("floatingDropdown", function() {返回 {限制:'E'，templateUrl: "scripts/Ui/FloatingDropdown.html",替换:真的，范围: {uiClass: '@',模型:'=ngModel'，选项树:'='},链接:功能(范围，元素，属性){scope.elemClass = scope.uiClass ||"ui 浮动下拉图标按钮";$(elem).dropdown();$(elem).find(".ui.dropdown").dropdown();}}})
scripts/Ui/FloatingDropdown.html 包含一个嵌套的包含.这会创建多级下拉菜单
<script type="text/ng-template" id="node_template.html"><div class="ui dropdown" ng-if="option.options"><span ><i class="下拉图标"></i>{{option.value}}</span><div class="menu" ng-if="data.options"><div class="item" ng-repeat="options in data.options" ng-include="'node_template.html'"></div>
<span ng-if="!option.options" ng-click="model=option">{{option}}</span><i class="下拉图标"></i><div class="菜单"><div class="item" ng-repeat="optionTree.options 中的选项" ng-include="'node_template.html'">
我的问题是 $(elem).find(".ui.dropdown") 找不到通过 ng-include 递归生成的 div
解决方案
通过像这样尝试在指令的 link() 方法中进行 DOM 操作，您正在尝试查询/修改尚未执行的 DOM 部分尚未呈现.
您需要将这些 jquery 调用推迟到以后.您可以使用:
$scope.$evalAsync(function() {//DOM 代码});
或
$timeout(function() {//DOM 代码}, 0);
使用 $evalAsync 将在下一个 $digest 循环中运行表达式，将允许您在 HTML 呈现在浏览器中之前对其进行修改.使用 $timeout 将等到 all $digest 周期完成.
I have a directive which has a template that recursively include a template. In my directive link function, I am unable to get the complete DOM with a selector.
Here is my directive. Notice that my directive try to call dropdown() function on all .ui.dropdown divs constructed so nested dropdown will be activated.
.directive("floatingDropdown", function() {
return {
restrict: 'E',
templateUrl: "scripts/Ui/FloatingDropdown.html",
replace: true,
scope: {
uiClass: '@',
model: '=ngModel',
optionTree: '='
},
link: function(scope, elem, attrs) {
scope.elemClass = scope.uiClass || "ui floating dropdown icon button";
$(elem).dropdown();
$(elem).find(".ui.dropdown").dropdown();
}
}
})
The scripts/Ui/FloatingDropdown.html contains a nested include. This creates multiple levels of dropdowns
<div class="{{elemClass}}">
<script type="text/ng-template" id="node_template.html">
<div class="ui dropdown" ng-if="option.options">
<span ><i class="dropdown icon"></i> {{option.value}}</span>
<div class="menu" ng-if="data.options">
<div class="item" ng-repeat="option in data.options" ng-include="'node_template.html'"></div>
</div>
</div>
<span ng-if="!option.options" ng-click="model=option">{{option}}</span>
</script>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" ng-repeat="option in optionTree.options" ng-include="'node_template.html'">
</div>
</div>
</div>
My problem is $(elem).find(".ui.dropdown") will not find the recursively generated divs by ng-include
解决方案
By attempting to do DOM manipulation in a directive's link() method like that, you're trying to query/modify a part of the DOM that hasn't been rendered yet.
You need to defer those jquery calls until later. You can do this using:
$scope.$evalAsync(function() {
// DOM code
});
or
$timeout(function() {
// DOM code
}, 0);
Using $evalAsync will run the expression during the next $digest cycle, will allow you to modify HTML before it's rendered in the browser. Using $timeout will wait until all $digest cycles are complete.
这篇关于指令链接函数无法访问整个模板 DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！