我一直在创建一个模块化的起始页面(In Angular)。 我创建了一个模块指令,可以处理简单的数据并将它们显示为列表。
最初,我的计划是创建可以处理其他类型数据的新指令,并简单地使用所需的指令标记。 当我读到有关动态更改指令templateUrl的时候,我改变了主意。我使用一个函数设置templateUrl,该函数从元素中读取值并返回所需的模板。
这就是问题的起点。我在我的对象中添加了一个moduleType,并认为我可以像在元素上硬编码值时那样读取值。没有这样的运气。
由于我使用ng-repeat为列表中的每个对象创建一个模块,我意识到在指令初始化之前没有运行数据绑定,所以我得到的只是“module.Type”而不是实际价值。编译完成后,模块可以正常工作,但在进行数据绑定之前我需要数据。
据我所知,ng-repeat在编译之前为项目创建单独的范围,数据绑定似乎在编译完成后发生,但我的指令需要在开始编译之前获取模板/ templateUrl。
相关代码示例:
<div ng-repeat="module in tab.ActiveModules">
<main-module id="{{module.ComponentId}}"
title="{{module.Title}}"
data="module.Data"
link="module.Link"
link2="module.Link2"
type="module.Type"> <!--Type is what should decide how the directive should behave-->
<!--title, data, link/link2 are just module specific data, irrelevant for the question--> -->
</main-module>
</div>
指令:
angular.module("FrontPageControllerModule")
.directive("mainModule", [function ($compile) {
return {
restrict: "E",
replace: true,
scope: {
id: '@',
title: '@',
data: '=',
link: '=',
link2: '=',
type: '@'
},
templateUrl: function (element, attr) {
switch (attr.type) {
case "link":
return "Templates/frontpagelink.html";
case "setting":
return "/Template/settings";
case "json":
this.controller = "JsonViewerController";
return "/Template/json-viewer";
default:
return "";
}
}
}
}]);