实质上,如果我使用绑定到控制器的属性,我的ng-repeat不会呈现内容。但是,如果我使用{{ctl.myarray}}将属性内容输出到屏幕,它就会读得很好,证明该属性是可访问的。
问题出现在一个指令中,该指令通过ajax动态加载内容并编译它。 ajax文件的内容包含带有指令的html,而THAT指令具有不起作用的ng-repeat。
这里是:
控制器(主要和第一个嵌套控制器)
<!-- main controller -->
<div ng-controller="ReportController as rc" ng-cloak="">
<!-- controller for filters -->
<div class="report-filters" ng-controller="FilterController as fc">
<!-- directive that loads bootstrap popovers from a template -->
<rep-popover parent="fc" title="Add Filter" template="html/popovers/add_filter.html">
<a href="" class="btn btn-default btn-add">Add Filter</a>
</rep-popover>
</div>
<!-- ../ rest of the page below ... -->
</div>
popover.directive.js (popover generator指令)
(function () {
'use strict';
angular.module(ng_module_name)
.directive('repPopover', popover);
popover.$inject = ['$http', '$compile'];
function popover($http, $compile) {
var directive = {
controller: controller,
controllerAs: 'pop',
link: link,
replace: true,
restrict: 'E',
scope: { // properties bound in html
parent: '=',
title: '@',
template: '@',
placement: '@',
container: '@'
}
};
return directive;
//////////////////
/** directive controller */
function controller($scope) {
var ctl = this;
ctl.parent = $scope.parent;
ctl.title = $scope.title;
ctl.template = $scope.template;
ctl.placement = $scope.placement;
ctl.close = close;
//////////////////
/** close the popover */
function close() {
var popover = $scope.element.children(":last-child");
popover.popover("hide");
}
}
/** DOM manipulation function */
function link(scope, element) {
scope.element = element;
if (!scope.template) {
alert("Error: popover requested, but no template provided!");
return;
}
// request template, and populate popover
$http.get(reports_data.root+'/'+scope.template).then(function (content) {
if (content && content.status == 200) {
var activator = element.children(":first-child");
var placement = scope.placement || "bottom";
var compiled_content = $compile(content.data)(scope);
// bootstrap popover
activator.popover({
title: scope.title,
content: compiled_content,
placement: placement,
html: true,
container: scope.container || false
});
}
});
}
}
}());
add_filter.html (弹出模板)
<!--- add filter -->
<div class="add-filter-popover">
<form>
<select rep-filter-select="" columns="parent.tracker.available" class="form-control filter-select">
<!-- THIS IS WHERE THE REPEAT BREAKS -->
<option ng-repeat="i in select.list">{{ i }}</option>
</select>
<!-- show before column is chosen -->
<div class="empty-spacing"></div>
<!-- ../ rest of template... -->
</form>
</div> <!--- ./add-filter-popover -->
filter.directive.js (popover模板中的嵌套指令)
(function () {
'use strict';
angular.module(ng_module_name)
.directive('repFilterSelect', filterSelect)
filterSelect.$inject = ['$compile'];
function filterSelect($compile) {
var directive = {
controller: controller,
controllerAs: 'select',
link: link,
replace: true,
restrict: 'A',
scope: {
columns: "="
}
};
return directive;
//////////////////
/** directive controller */
function controller($scope, $element) {
var ctl = this;
ctl.list = [1,2,3,4,5];
//////////////////
}
/** DOM manipulation function */
function link(scope, element) {
// manual compile as part of a popover
$compile(element.contents())(scope);
}
}
})();
如果您在add_filter中看到我的评论,则不会填充这些选项。如果我将其更改为<option ng-repeat="i in [1,2,3,4,5]"></option>
,那么它可以正常工作。
此外,如果我在select中输出{{select.list}}(并且为了测试目的而使指令成为div),则select.list的内容是正确的。
感谢愿意快速阅读的人:)