首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular.js指令动态templateURL

Angular.js指令动态templateURL
EN

Stack Overflow用户
提问于 2014-02-18 01:25:04
回答 3查看 184.7K关注 0票数 171

我在调用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.htmlbefore-2-tuesday.html、…的文件

EN

回答 3

Stack Overflow用户

发布于 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);
        }
    }
})
票数 6
EN

Stack Overflow用户

发布于 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>
票数 5
EN

Stack Overflow用户

发布于 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
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21835471

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档