Question

所以我有两个指令，功能相同，唯一的区别是正在显示的模板。有没有办法动态更改模板？

这就是我想出的。有更清洁的方式吗？

.directive('tileResource', function ($state) {
  return changeTemplate($state, 'ng-library/templates/tile_view.tpl.html'); 
})

.directive('listResource', function ($state) {   
  return changeTemplate($state, 'ng-library/templates/list_view.tpl.html'); 
})


function changeTemplate($state, template) {
  return {
    scope: {
      'resource': '='
    },
    templateUrl: template,
    link: function (scope) {.... // cool code   }
  }
}

Answer 1

这是对现有代码的重构，它做了同样的事情，但我认为它的意图更清晰。

createListDirective('listResource', 'ng-library/templates/list_view.tpl.html'); 
createListDirective('tileResource', 'ng-library/templates/tile_view.tpl.html'); 


function createListDirective(name, template) {
    angular.module('moduleName').directive(name, function ($state) {   
      return {
        scope: {
          'resource': '='
        },
        templateUrl: template,
        link: function (scope) {.... // cool code   }
      }
    }
}

Answer 2

总的想法很好，但是由于欺骗依赖性参数，当前的实现看起来不是很干净，你也会遇到从其他模块访问函数的问题。

这样会更好，所以你可以充分利用Angular DI。

    "context": {
        "#t": "string",
        "#v": "jA0EAwMC.\r\n..CAqQ==\r\n"
    },
    "saveInto": [
        "jA0EAw.\r\n.JneU0=\r\n"
    ]

虽然我更喜欢使用mixins更接近OOP方法：

app.factory('baseDirectiveFactory', function (someDirectiveDependency) {
  return function (templateUrl) {
    return {
      templateUrl: templateUrl,
      controller: function () {
        // ...
      }      
    };
  }
})

app.directive('someDirective', function (baseDirectiveFactory) {;
  return baseDirectiveFactory('someTemplate');
});

您也可以直接扩展现有指令。 Angular将指令视为包含DDO数组的服务，如果没有指令名称冲突，则需要第一个（也是唯一的）DDO：

app.factory('baseDirectiveService', function (someDirectiveDependency) {
  return {
    controller: function () {
      // ...
    }
  };
});


app.directive('someDirective', function (baseDirectiveService) {
  return angular.extend({}, baseDirectiveService, {
    templateUrl: '...'
  });
})

Answer 3

你可以创建这样的函数：

function changeTemplate($state, template) {
  return {
    scope: {
      'resource': '=',
      'template': '='
    },
    template: '<div ng-include="{{template}}"></div>',
    link: function (scope) {.... // cool code   }
  }
}

只需更改父范围的模板参数。

是否有更好的方法来更改指令中的templateUrl

3 个答案: