Question

是否可以使用动态templateUrl创建AngularJS组件？意味着我想将一个服务注入到组件中，该组件为我提供了模板的基本路径：

即：templateUrl：configuration.baseScriptPath +＆＃39; ... html＆＃39;

可以使用指令，但如何使用组件执行此操作？

angular.module('runtime')
    .component('textInput', {

        templateUrl: /*configuration.baseScriptPath + */'fd/components/text_input_instance.html',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

Answer 1

您可以使用模板和ng-include代替templateUrl，如下所示：

angular.module('runtime')
    .component('textInput', {

        template: '<div ng-include="getTemplate()">',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

           $scope.getTemplate = function () {
               return configuration.baseScriptPath + 'fd/components/text_input_instance.html';
          };

Answer 2

组件的templateUrl属性也需要一个函数。所以你可以试试这个，

angular.module('runtime')
  .component('textInput', {

      templateUrl: ['$configuration', function($configuration) {
        return $configuration.basepath + '.html'
      }],
      controller: [
          '$scope', '$element', 'focusInputGroup', 'configuration',
          function($scope, $element, focusInputGroup, configuration) {

angularjs组件与动态templateUrl

2 个答案: