AngularJS - 指令 - 通过检查属性确定在一个指令上运行哪个指令



目标:连续运行 2 个指令,第二个指令将由第一个指令输出确定

问题:动态地进行。

我想制定一个核心指令,它将得到:

<div field-directive="textbox" field-model="SomeModel"/>

在核心指令中,我想使用模板返回类似的东西:

<div >
                       <div>
                            <div >
                                {{fieldModel.Title}}:
                            </div>
                            <div>
                                <div ng-model="fieldModel.Value" textbox />
                            </div>
                       </div>
                   </div>

问题是我无法弄清楚如何编写模板中textbox的属性field-directive的值,我需要它,因为我希望另一个指令在此指令的输出上运行。我的指令:

myapp.directive('fieldDirective', function()
    {
        replace : true,
        scope : {
            fieldModel: "=",
            fieldDirective: "="
        },
        link: function (scope, element, attr) {
            element.html(element.html().replace("field-directive", attr.fieldDirective));
        }
        template: 
        '<div ng-show="fieldModel.IsRelevant">
                       <div>
                            <div class="fieldTitle">
                                {{fieldModel.Title}}:
                            </div>
                            <div>
                                <div ng-model="fieldModel.Value" fieldDirective />
                            </div>
                       </div>
                   </div>';
    }

只是为了其他人会遇到类似的问题:我的解决方案是将这些数据写入链接函数,然后像这样使用编译函数:

myapp.directive('fieldDirective',['$compile', function(compile)
{
  return{
    replace : true,
    scope : {
        fieldModel: "=",
        fieldDirective: "="
    },
    link: function (scope, element, attr) {
          var strTemplate  =('<div ng-show="fieldModel.IsRelevant"><div><div class="fieldTitle">{{fieldModel.Title}}:</div><div><div ng-model="fieldModel.Value" placeHolder /></div></div></div>').replace("placeHolder", attr.fieldDirective);
          var e = angular.element(strTemplate);
        compile(e.contents())(scope);
        element.replaceWith(e);

    },
             }
}]
);

最新更新