更新

Question

目前，我已经以这种方式切换了我的指令。

在我的指令中：

(function(){
    'use strict';
    var controller = ['$scope', function ($scope) {

      }];

    angular
        .module('moduleName', ['myDependency'])
        .directive('dirName', function($compile, $window){
            return{
                restrict: 'E',
                replace: true,
                require: [ '^?myDependency'],
                scope: false,
                controller: controller ,
                template:
                `<div ng-switch="templateConfig.type">
                   <div ng-switch-when='con1'>
                     <p> Config 1 </p>
                   </div>
                   <div ng-switch-when='con2'>
                     <p> Config 2 </p>
                   </div>
                   <div ng-switch-when='con3'>
                     <p> Config 3 </p>
                   </div>
                 </div>`

在PHP文件中，我有以下内容：

function pageController($scope, $http, $filter, $cleo, $timeout, $compile) {
    $scope.templateConfig= {type: 'Con2'};
}
        <div class="row-fluid">
            <div class="span1" id="title" > name </div>
            <div class="span11">
                <dirName>
                </dirName>
                <br/>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span1" id="title" > name2 </div>
            <div class="span11">
                <dirName>
                </dirName>
                <br/>
            </div>
        </div>

它是如何工作的，当我可以使用{type: 'Con2'}.在模板之间切换但是，这会影响两个<dirName></dirName>标记。我想要的是让我能够彼此独立地定义它们。

我想要的是<dirName templateConfig=Con1></dirName>。我不完全确定如何实现这一点，但我认为不应该太难以进行转换。

另外，我确实遗漏了PHP文件中的大量代码并更改了代码中的原始名称，但这些代码都不相关。

Answer 1

使用template属性的函数形式：

app.directive('dirName', function($compile, $window){
    return{
        restrict: 'E',
        template: function (elem, attrs) {
            switch(attrs.templateConfig) {
                case 'con1':
                  return `<p> Config 1 </p>`;
                case 'con2':
                  return `<p> Config 2 </p>`;
                case 'con3':
                  return `<p> Config 3 </p>`;
             };
         }
     };
})

使用示例：

<dir-name template-config="con2">
</dir-name>

更新

来自文档：

模板

价值可能是：


一个函数，它接受两个参数tElement和tAttrs（在下面的compile函数api中描述）并返回一个字符串值。


— AngularJS Comprehensive Directive API Reference - template

AngularJS - 在模板之间切换

1 个答案:

更新

模板