Question

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

-fx-faint-focus-color

我可以生成如下字段

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>'
        }
    })

选中此plunker

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

控制器

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

说 contact.html

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);
          });
        }
      };
    });
});

我的问题是， bindCompiledHtml 指令生成元素并按预期调用 field 指令但它的值不会被解析。从字段指令链接功能设置断点，如下所示 elem

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

和控制台发出以下错误

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

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

如果使用隔离范围解析所有值，我们如何调用 field 指令？请建议

Answer 1

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

您在当前代码中遇到的麻烦是指令的定义。一旦它的属性未通过=在隔离范围内定义，它们的值将永远不会被评估并始终保持纯文本。这就是为ng-repeat定义{{t.template_name}}的属性值时field 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>

#include <iostream>
#include <vector>
#include <algorithm>
#include <vector>

class A
{
    public:
        int x;
        explicit A(int x): x(x) {}
        bool operator<(const A& a) { return x < a.x; }
};

int
main()
{
    std::vector<A> v;
    v.push_back(A(20));
    v.push_back(A(10));
    v.push_back(A(15));
    v.push_back(A(5));

    A result(*(std::max_element(v.begin(), v.end())));
    std::cout << result.x;

    return 0;
}

更新了plunker

指令生成指令字段动态不编译

1 个答案: