Angular.js指令dynamic模板库
我在routeProvider模板中有一个自定义标签，它需要一个directive模板。 version属性将由范围填充，然后调用正确的模板。
<hymn ver="before-{{ week }}-{{ day }}"></hymn>
这个赞美诗有多个版本，基于它的date和时间。 我期待使用该指令来填充正确的.html部分。 该variables不被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 ，…
你可以使用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中dynamic生成的path。
感谢@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); } } })
这里你不需要自定义指令。 只要使用ng-include src属性。 它被编译，所以你可以把代码放在里面。 请参阅plunker解决您的问题。
<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>
我遇到了同样的问题，我以与其他人稍微不同的方式解决了问题。 我正在使用angular1.4.4。
在我的情况下，我有一个创buildCSS 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="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>' } })
