javascript - 动态生成指令字段的指令无法编译

Question

我创建了名为 field 的基本 HTML 字段生成器指令，如下所示

app.directive('field',function(){
        return {
            restrict : "E",
            scope : {
               fielddata : '='
            },
            link : function(scope,elem,attr){
                var content;
                scope.Options = {
                    id: scope.$id+'_'+elem.attr('id'),
                    label : elem.attr('label'),
                    placeholder : elem.attr("placeholder"),

                };
                scope.contentUrl = 'templates/fields/'+elem.attr('template')+'.html';           
            },
            template: '<div ng-include="contentUrl"></div>'
        }
    }) 

我可以生成如下所示的字段

<field id="NAME" template="text" label="First Name" placeholder="Enter First Name" fieldData="NAME"></field>

检查这个plunker

扩展功能以生成元素指令本身。有简单的对象来设置 field 元素并使用另一个指令来生成 元素指令

Controller

app.controller('contactController', ['$scope', 'dataService',function($scope,dataService) {
        $scope.message = 'Contact us! . This is just a demo.';
        dataService.getContactData().then(function(data) {
            $scope.NAME = data.first_name;
            $scope.LNAME = data.last_name;
            $scope.DESC = data.description;
        });
          $scope.fields= [
            {
              elements: [
                            {
                                template_name : "text"
                                id: "NAME",
                                label: "First Name",
                                placeholder : "First Name"
                            }           
                        ],
              html: '<div ng-repeat="elem in t.elements"><field id="{{elem.id}}" template="{{elem.template_name}}" label="{{elem.label}}"  placeholder="{{elem.placeholder}}""  fieldData="{{elem.id}}" ></field></div>'
            }
          ];
    }]);
    app.directive("bindCompiledHtml", function($compile, $timeout) {
      return {
        template: '<div></div>',
        scope: {
          rawHtml: '=bindCompiledHtml'
        },
        link: function(scope, elem, attrs) {
          scope.$watch('rawHtml', function(value) {
            if (!value) return;
            var newElem = $compile(value)(scope.$parent);
            elem.contents().remove();
            elem.append(newElem);
          });
        }
      };
    });
});

说contact.html

<div ng-repeat="t in fields" bind-compiled-html="t.html"></div>

我的问题是，bindCompiledHtml指令生成元素并按预期调用field指令，但它的值没有被解析。从字段指令链接函数设置断点给出 elem 如下

[
<field id=​"{{elem.id}​}​" template=​"{{elem.template_name}​}​" label=​"{{elem.label}​}​" placeholder=​"{{elem.placeholder}​}​" class=​"ng-isolate-scope">​
<!-- ngInclude: contentUrl -->
</field>​
]

控制台给出以下错误

/templates/fields/%7B%7Belem.template_name%7D%7D.html 404 (Not Found) 

要查看 404 请查看此 plunker控制台

一旦使用隔离范围解析了 field 指令的所有值，我们如何调用它？请指教

Answer 1

Dinesh，如果没有给定的原始问题，您的代码就相当复杂了。这就是为什么我询问这些嵌套编译的目的。

您在当前代码中遇到的麻烦是指令的定义。一旦它的属性没有通过 = 在隔离范围内定义，它们的值将永远不会被评估，并且将始终保持纯文本。这就是为什么在定义 字段 的属性值时，不能在 ng-repeat 中使用 {{t.template_name}} 等表达式> 指令。指令应具有以下实现

app.directive('field', function() {
  return {
    restrict: "E",
    scope: {
      placeholder: '=',
      label: '=',
      id: '=',
      template: '='
    },
    link: function(scope, elem, attr) {
      var content;
      scope.Options = {
        id: scope.$id + '_' + scope.id,
        label: scope.label,
        placeholder: scope.placeholder
      };
      scope.contentUrl = scope.template + '.html';
    },
    template: '<div ng-include="contentUrl"></div>'
  }
});

因此，您总是必须为这些属性定义一个表达式。因此，在“手动”标记中，您可以使用 "'my text'" 而不是 "my text"

<field id="NAME" template="'text'" label="'First Name'" 
     max-size="40" placeholder="'Enter First Name'" 
     type="edit" ></field>

已更新plunker