Js 指令动态 templateURL

我在 routeProvider模板中有一个自定义标记，它调用 directive模板。范围将填充 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
}
});

摘录目录中有多个文件标记为 before-1-monday.html、 before-2-tuesday.html、 ..。

186936 次浏览
小开
最佳答案

可以使用 ng-include指令。

试试这样:

emanuel.directive('hymn', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.getContentUrl = function() {
return 'content/excerpts/hymn-' + attrs.ver + '.html';
}
},
template: '<div ng-include="getContentUrl()"></div>'
}
});

UPD 观看 ver属性

emanuel.directive('hymn', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
attrs.$observe("ver",function(v){
scope.contentUrl = 'content/excerpts/hymn-' + v + '.html';
});
},
template: '<div ng-include="contentUrl"></div>'
}
});
小开 
emanuel.directive('hymn', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// some ode
},
templateUrl: function(elem,attrs) {
return attrs.templateUrl || 'some/path/default.html'
}
}
});

因此，可以通过标记提供 templateUrl

<hymn template-url="contentUrl"><hymn>

现在您只需要注意使用动态生成的路径填充属性 ContentUrl。

小开

感谢@pgreory，我可以使用这个指令来解决内联编辑的问题

.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);
}
}
})
小开

这里不需要自定义指令。只需使用 包括 src 属性。它是经过编译的，所以你可以把代码放在里面

<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>
小开

我也遇到了同样的问题，而且我解决问题的方式与其他人略有不同。 我用的是角度1.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
}
小开

我有一个 例子关于这个。

<!DOCTYPE html>
<html ng-app="app">


<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>


<body>
<div class="container-fluid body-content" ng-controller="formView">
<div class="row">
<div class="col-md-12">
<h4>Register Form</h4>
<form class="form-horizontal" ng-submit="" name="f" novalidate>
<div ng-repeat="item in elements" class="form-group">
<label>\{\{item.Label}}</label>
<element type="\{\{item.Type}}" model="item"></element>
</div>
<input ng-show="f.$valid" type="submit" id="submit" value="Submit" class="" />
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="app.js"></script>
</body>


</html>

angular.module('app', [])
.controller('formView', function ($scope) {
$scope.elements = [{
"Id":1,
"Type":"textbox",
"FormId":24,
"Label":"Name",
"PlaceHolder":"Place Holder Text",
"Max":20,
"Required":false,
"Options":null,
"SelectedOption":null
},
{
"Id":2,
"Type":"textarea",
"FormId":24,
"Label":"AD2",
"PlaceHolder":"Place Holder Text",
"Max":20,
"Required":true,
"Options":null,
"SelectedOption":null
}];
})
.directive('element', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.contentUrl = attrs.type + '.html';
attrs.$observe("ver", function (v) {
scope.contentUrl = v + '.html';
});
},
template: '<div ng-include="contentUrl"></div>'
}
})

提交答案