我有以下代码,在我的应用程序和许多地方使用
想用指令替换一些 HTML.我意识到有
并非如此,我可以替换,因为HTML是如此不同：
想用指令替换一些 HTML.我意识到有
并非如此,我可以替换,因为HTML是如此不同：
<div class="select-area">
<span>Subject</span>
<select data-ng-disabled="option.subjects.length == 0"
data-ng-model="option.selectedSubject"
data-ng-options="item.id as item.name for item in option.subjects">
</select>
</div>
<div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)">
<span>Subtopic</span>
<select data-ng-model="option.selectedSubtopic"
data-ng-options="item.id as item.name for item in option.subtopicsPlus">
</select>
</div>
我想使用指令,但我不确定如何开始.我想用
转换为替换内部所以我在想我的指令调用
看起来像这样：
<div class="select-area" my-select-area="Subject">
<select data-ng-disabled="option.subjects.length == 0"
data-ng-model="option.selectedSubject"
data-ng-options="item.id as item.name for item in option.subjects">
</select>
</div>
<div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)" my-select-area="Subtopic">
<select data-ng-model="option.selectedSubtopic"
data-ng-options="item.id as item.name for item in option.subtopicsPlus">
</select>
</div>
这是我到目前为止所拥有的：
app.directive('mySelect',function () {
return {
restrict: "A",template: "<div class='select-area'>" +
"<span> </span>" +
"</div>",};
});
有人可以告诉我如何传递跨越范围内的参数以及如何添加transclude？
更新：根据Bastien的回答
有几个小的语法错误,但根据Bastien的答案我尝试了以下内容：
app.directive('mySelect',transclude: true,template: "<div class='select-area'>" +
"<span> {{ mySelectArea }} </span>" +
"<div ng-transclude></div>" +
"</div>",link: function (scope,element,attrs) {
scope.mySelectArea = attrs.mySelectArea;
}
}
});
这是我的HTML：
<div data-my-select myselectarea="Page type">
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"></select>
</div>
这是它创建的HTML：
<div data-my-select="" myselectarea="Page type">
<div class="select-area">
<span class="ng-binding"> </span>
<div ng-transclude="">
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"
class="ng-scope ng-pristine ng-valid">
<option value="0">Edit Basic</option>
<option value="1" selected="selected">Edit Standard</option>
<option value="2">Report</option>
</select>
</div>
</div>
</div>
我真正需要的是创建它：
<div class="select-area">
<span>Page Type</span>
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"
class="ng-pristine ng-valid">
<option value="0">Edit Basic</option>
<option value="1" selected="selected">Edit Standard</option>
<option value="2">Report</option>
</select>
</div>
关于翻译,我建议你看看
this section of the doc.在你的情况下,你必须：
>请求在指令定义对象中进行转换
>在模板中指明哪个元素将使用ng-transclude指令接收已转换的元素
这给了我们这个指示：
app.directive('mySelect',template: "<div class='select-area'>" +
"<span> </span>" +
"<div ng-transclude></div>" +
"</div>"
};
});
关于传递参数,您可以访问link函数的第三个参数上的指令属性：
app.directive('mySelect',template: "<div class='select-area'>" +
"<span> </span>" +
"<div ng-transclude></div>" +
"</div>",attrs) {
}
};
});
然后,如果您的参数始终是纯文本,则可以直接访问该值：
attrs.mySelectArea
否则,如果您的参数可以在范围内,则可以使用$parse服务获取其值：
$parse(attrs.mySelectArea)(scope)
要在模板中显示值,您必须在范围内提供它：
app.directive('mySelect',attrs) {
scope.mySelectArea = attrs.mySelectArea;
}
};
最后,如果您希望指令模板替换元素,则可以使用replace选项(more infos)：
app.directive('mySelect',replace: true,attrs) {
scope.mySelectArea = attrs.mySelectArea;
}
};
我做了一个plunker.
我强烈建议您深入了解directive guide和directive API,以便更好地了解指令可以做些什么.
