我正在学习 AngularJS,并且正在培训如何构建可重用指令。
问题是它适用于具有一个元素的数组,但不适用于两个或更多元素。
HTML 标记只是:<breadcrumb></breadcrumb>
在这种情况下,按预期呈现。但是,我需要手动执行“replace:true”会执行的操作。
错误是:parent 是 null。
我用尽了所有谷歌搜索来寻找一个例子。
但我的情况很特殊,因为<inner ng-repeat>
内部<breadcrumb>
是另一个内部指令而不是普通标签,这就是替换不起作用的原因,我需要手动执行。
存在与“动态模板加载...”相关的问题
OBS:我尝试在“链接:”和“编译:”中都做逻辑,同样的错误......
我可以使代码工作,但是,我无法像自动删除<inner>
标签那样删除标签transclude
。
现在输出几乎是完美的,我只需要删除<inner>
,但直到现在还没有运气。我试图替换元素标签,但仍然没有运气。
<ul class="breadcrumb">
<!-- I want to remove this <inner> and leave <li> alone! -->
<inner data-ng-repeat="_item in items track by $index" class="ng-scope">
<li class="ng-scope"><a href="#" class="ng-binding">1</a>
</li>
</inner>
<!-- remove for clarity -->
</ul>
var myModule = angular.module("myModule", []);
myModule.directive('breadcrumb', function($timeout) {
"use strict";
var directiveDefinitionObject = {
template: '<ul class="breadcrumb"><inner data-ng-repeat="_item in items track by $index"></inner></ul>',
replace: true,
// transclude: true,
restrict: 'E',
scope: {},
controller: ["$scope", "$element", "$attrs", "$transclude", controller],
link: ["scope", "iElement", "iAttrs", link]
};
function link(scope, iElement, iAttrs) {
scope.addNewItem = function(new_item) {
scope._push(new_item);
}
}
function controller($scope, $element, $attrs, $transclude) {
$scope.items = [1, 2, 3, 4, 5];
$scope._push = function(item) {
$scope.items.push(item);
};
$scope._pop = function() {
$scope.items.pop();
};
$scope.is_last = function(item) {
return $scope.items.indexOf(item) == ($scope.items.length - 1);
}
}
return directiveDefinitionObject;
});
myModule.directive("inner", ["$compile",
function($compile) {
"use strict";
function getItemTemplate(index) {
return '<li><a href="#">{{ _item }}</a></li>';
}
return {
require: "^breadcrumb",
restrict: "E",
compile: function compile(tElement, tAttrs)
{
return function postLink(scope, iElement, iAttrs)
{
iElement.html(getItemTemplate(0));
$compile(iElement.contents())(scope);
};
}
};
}
]);