我在调用directive
模板的routeProvider
模板中有一个自定义标记。version
属性将由作用域填充,然后调用正确的模板。
<hymn ver="before-{{ week }}-{{ day }}"></hymn>
根据周和日的不同,赞美诗有不同的版本。我期望使用该指令来填充正确的.html
部分。该变量未被templateUrl
读取。
emanuel.directive('hymn', function() {
var contentUrl;
return {
restrict: 'E',
link: function(scope, element, attrs) {
// concatenating the directory to the ver attr to select the correct excerpt for the day
contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
},
// passing in contentUrl variable
templateUrl: contentUrl
}
});
excerpts目录中有多个标记为before-1-monday.html
、before-2-tuesday.html
、…的文件
发布于 2015-05-19 16:07:09
感谢@pgregory,我可以使用这个指令进行内联编辑来解决我的问题
.directive("superEdit", function($compile){
return{
link: function(scope, element, attrs){
var colName = attrs["superEdit"];
alert(colName);
scope.getContentUrl = function() {
if (colName == 'Something') {
return 'app/correction/templates/lov-edit.html';
}else {
return 'app/correction/templates/simple-edit.html';
}
}
var template = '<div ng-include="getContentUrl()"></div>';
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
}
}
})
发布于 2015-06-02 03:26:59
在这里你不需要定制指令。只需使用ng-include源属性即可。它已经编译好了,所以你可以把代码放进去。See plunker with solution for your issue.
<div ng-repeat="week in [1,2]">
<div ng-repeat="day in ['monday', 'tuesday']">
<ng-include src="'content/before-'+ week + '-' + day + '.html'"></ng-include>
</div>
</div>
发布于 2015-08-28 05:08:18
我也有同样的问题,但我的解决方法与其他人略有不同。我使用的是angular 1.4.4。
在我的例子中,我有一个创建CSS Bootstrap面板的shell模板:
<div class="class-container panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">{{title}} </h3>
</div>
<div class="panel-body">
<sp-panel-body panelbodytpl="{{panelbodytpl}}"></sp-panel-body>
</div>
</div>
我想包括面板主体模板,这取决于路线。
angular.module('MyApp')
.directive('spPanelBody', ['$compile', function($compile){
return {
restrict : 'E',
scope : true,
link: function (scope, element, attrs) {
scope.data = angular.fromJson(scope.data);
element.append($compile('<ng-include src="\'' + scope.panelbodytpl + '\'"></ng-include>')(scope));
}
}
}]);
然后,当路由为#/students
时,我将包含以下模板
<div class="students-wrapper">
<div ng-controller="StudentsIndexController as studentCtrl" class="row">
<div ng-repeat="student in studentCtrl.students" class="col-sm-6 col-md-4 col-lg-3">
<sp-panel
title="{{student.firstName}} {{student.middleName}} {{student.lastName}}"
panelbodytpl="{{'/student/panel-body.html'}}"
data="{{student}}"
></sp-panel>
</div>
</div>
</div>
panel-body.html模板如下:
Date of Birth: {{data.dob * 1000 | date : 'dd MMM yyyy'}}
有人想要尝试的情况下的示例数据:
var student = {
'id' : 1,
'firstName' : 'John',
'middleName' : '',
'lastName' : 'Smith',
'dob' : 1130799600,
'current-class' : 5
}
https://stackoverflow.com/questions/21835471
复制相似问题