AngularJS

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 文件中遗漏了很多代码并更改了代码中的原始名称，但其中 none 应该是相关的。

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>

更新

来自文档：

template

Value may be:

A function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value.

— AngularJS Comprehensive Directive API Reference - template

AngularJS - 在模板之间切换

AngularJS - Switch between Templates

html

php

angularjs-directive

更新

template