[英]why is ng-repeat not working in custom directive?
I am new to AngularJS and I cannot get ng-repeat
to work when embedded in a directive as follows我是 AngularJS 的新手,当嵌入指令中时,我无法让
ng-repeat
工作,如下所示
<settings-widget>
<ul class="ul-border">
<li class="box" ng-repeat="item in list">{{item}}</li>
</ul>
</settings-widget>
app.directive("settingsWidget", function ($compile, $timeout) {
return {
restrict: "E",
replace: "true",
scope: { },
transclude: true,
templateUrl: "/Settings.html",
compile: function (element, attrs, transclude) {
return function (scope) {
transclude(scope, function (clone) {
var html = angular.element("<div>").append(clone).html();
scope.template = html;
});
};
},
controller: ['$scope', '$element', '$attrs', '$rootScope', function ($scope, $element, $attrs, $rootScope) {
$scope.list = ['item1', 'item2'];
}]
};
});
Settings.html设置.html
<div>
<form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
<div compile="{{template}}"></div>
</form>
</div>
for some reason when I run my app <li>
tags are not being created.出于某种原因,当我运行我的应用程序时
<li>
标签没有被创建。
Could someone please help me out?有人可以帮帮我吗?
1. Normal transclusion (passed html uses parent scope): You define list
in parent controller! 1.正常包含(通过html使用父范围):你在父控制器中定义
list
!
<settings-widget>
<ul class="ul-border">
<li class="box" ng-repeat="item in list">{{item}}</li>
</ul>
</settings-widget>
app.directive("settingsWidget", function () {
return {
restrict: "E",
replace: "true",
scope: { },
transclude: true,
templateUrl: "/Settings.html"
}
});
<div>
<form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
<ng-transclude></ng-transclude>
</form>
</div>
2. No transclusion (passed html uses directive scope): 2. 没有包含(通过 html 使用指令范围):
<settings-widget additional-tpl="'myTemplate'">
</settings-widget>
<script type="text/ng-template" id="myTemplate">
<ul class="ul-border">
<li class="box" ng-repeat="item in list">{{item}}</li>
</ul>
</script>
app.directive("settingsWidget", function () {
return {
restrict: "E",
scope: {
additionalTpl: '<'
},
templateUrl: "./settings.html",
controller: ['$scope', function ($scope) {
$scope.list = ['item1', 'item2'];
}]
};
});
<div>
<form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
<div ng-include="additionalTpl">
</div>
</form>
</div>
2. Transclusion+ (passed html want to use both directive and parent scopes): This one seems to be tricky and I never actually did that, I guess quite easy way is using $parent
ref cause you dont have this compile
manual calls: 2. Transclusion+(通过 html 想要同时使用指令和父作用域):这个看起来很棘手,我从来没有真正做过,我想很简单的方法是使用
$parent
ref 因为你没有这个compile
手动调用:
<settings-widget>
<div>By default I take value from parent scope {{parentCtrlValue}}
</div>
<ul class="ul-border">
<li class="box" ng-repeat="item in $parent.list">{{item}}</li>
</ul>
</settings-widget>
app.directive("settingsWidget", function () {
return {
restrict: "E",
scope: { },
transclude: true,
templateUrl: "./settings.html",
controller: ['$scope', function ($scope) {
$scope.list = ['item1', 'item2'];
}]
};
});
<div>
<form id="settingsForm" name="settingsForm" novalidate ng-submit="save(settingsForm)" ng-model-options="{ allowInvalid: true}">
<ng-transclude></ng-transclude>
</form>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.