Angularjs Angular.js指令动态模板URL_Angularjs_Angularjs Directive

Angularjs Angular.js指令动态模板URL

angularjs

Angularjs Angular.js指令动态模板URL,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我在routeProvider模板中有一个自定义标记，它调用指令模板。version属性将由调用正确模板的范围填充 <hymn ver="before-{{ week }}-{{ day }}"></hymn> 摘录目录中有多个文件标记为before-1-monday.html，before-2-beday.html，…您可以使用ng include指令试着这样做：伊曼纽尔指令（'hymn'，function（）{ 返回{ 限制：'E'，链接：函数（范围、元素、属

我在

routeProvider

模板中有一个自定义标记，它调用

指令

模板。

version

属性将由调用正确模板的范围填充

<hymn ver="before-{{ week }}-{{ day }}"></hymn>

摘录目录中有多个文件标记为

before-1-monday.html

，

before-2-beday.html

，…

您可以使用

ng include

指令

试着这样做：

伊曼纽尔指令（'hymn'，function（）{ 返回{ 限制：'E'，链接：函数（范围、元素、属性）{ scope.getContentUrl=函数（）{ 返回'content/extracts/hymm-'+attrs.ver+'.html'； } }, 模板：“” } }); UPD。用于观看
ver
属性

伊曼纽尔指令（'hymn'，function（）{ 返回{ 限制：'E'，链接：函数（范围、元素、属性）{ scope.contentUrl='content/extracts/hymm-'+attrs.ver+'.html'；属性$观察（“版本”，功能（v）{ scope.contentUrl='content/extracts/hymm-'+v+'.html'； }); }, 模板：“” } }); 因此，您可以通过标记提供templateUrl

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

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

多亏了@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);
        }
    }
})

指令（“超级编辑”，函数（$compile）{ 返回{ 链接：函数（范围、元素、属性）{ var colName=attrs[“超级编辑”]；警报（colName）； scope.getContentUrl=函数（）{ 如果（colName=='Something'）{ 返回“app/correction/templates/lov edit.html”； }否则{ 返回“app/correction/templates/simple edit.html”； } } var模板=“”； var linkFn=$compile（模板）； var内容=linkFn（范围）；元素。追加（内容）； } } })

此处不需要自定义指令。只需使用src属性。它是经过编译的，因此您可以将代码放入其中

我也遇到了同样的问题，我的解决方式与其他人略有不同。我使用的是angular 1.4.4

在我的例子中，我有一个创建CSS引导面板的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>

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>


登记表
{{item.Label}

angular.module（'app'，[]）
.controller（'formView'，函数（$scope）{
$scope.elements=[{
“Id”：1，
“类型”：“文本框”，
“FormId”：24，
“标签”：“名称”，
“占位符”：“占位符文本”，
“最大”：20，
“必需”：false，
“选项”：空，
“SelectedOption”：空
},
{
“Id”：2，
“类型”：“文本区域”，
“FormId”：24，
“标签”：“AD2”，
“占位符”：“占位符文本”，
“最大”：20，
“必需”：正确，
“选项”：空，
“SelectedOption”：空
}];
})
.directive（'element'，function（）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
scope.contentUrl=attrs.type+'.html'；
属性$观察（“版本”，功能（v）{
scope.contentUrl=v+'.html'；
});
},
模板：“”
}
})

这是一个很好的解决方案。有没有一种方法可以编写它来处理多个实例？当前，一旦设置了范围，它就无法识别新的attrs.ver。您的意思是，您想查看

ver

属性更改和重新加载指令吗？感谢您的澄清。如果您以upd中发布的方式声明指令，那么当您使用多个

时，您的用例应该运行良好。或者是时候在？Hello@AlenGiliana构建一个原型了，我看了一下你的网站，然后改变了[JSFiddle](http://jsfiddle.net/JQgG5/6/). 您只需要指令声明中的scope:{}`。另外，我强烈建议您使用angular的最新版本<代码>-本地页面是否可替代html页面？您的意思是使用Angular 1.2.1吗？谢谢你的帮助，顺便说一句，这个学习曲线是疯狂的：）很好，但是。。。我可以从templateUrl函数访问范围属性吗？templateUrl依赖于范围值，但我无法访问它：（我很高兴你们找到了解决方案。我不建议指令依赖于它的父指令，除非它是在指令的require部分中设置的控制器。最后！这正是我要找的！我没有意识到我可以从templateUrl函数访问elem和attrs。谢谢！templateUrl每个指令调用一次，它不会被ea调用。）ch指令实例初始化，小心！！！这可能是角度错误…我还没有检查它，但根据我的最新发现，可能值得一提的是，它是

每$compile阶段一次

。换句话说，如果您在指令中使用

ng repeat

，并且希望根据特定的参数设置单个模板

ng repeat

item context，它将不起作用，因为在实际

ng repeat

发生之前，

compile

阶段会遍历您的指令一次。因此，这意味着它将被调用一次……如果您使用AngularJS 1.5+，则可能会重复，请检查此优雅的解决方案：

    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));
            }
        }
    }]);

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

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>'
        }
    })