Question

使用我的自定义指令我想将ng-model从root指令移动到子输入元素。由于某种原因，该模型不适用于子元素。这是代码

标记：

<span usinglink ng-model="test">
      <input type="checkbox"  value="test" />
      <span>{{test}}</span>
    </span>

指令：

mymodule.directive('usinglink', function($compile){
        return{
          link : function(scope, element, attrs){
               element.children('input').attr('ng-model',element.attr('ng-model'));    
          }
        } 
     });

当我使用compile而不是link时，这确实有效。任何人都可以告诉我这种行为的原因以及我可以使用链接实现此行为的方式。

omwmodule.directive('prNgDropdown', function ($compile) {
        return {
            compile : function (element, attributes) {
                var selectElement = element;
                if (element.attr("ng-model") != undefined) {
                             element.attr("ng-init", element.attr("ng-model") + "= '" + element.val() + "'");
                }
                //'Removing the directive after the logic.as  the custom directive is placed on the same element. compile would create an infinit loop

                //selectElement.removeAttr("pr-ng-dropdown");
                //$compile(selectElement.parent())(scope);

            }
        }
    });

由于某种原因，我的ng-init没有更新模型。你能解释一下缺少什么。

Answer 1

Angular不会处理手写HTML（{1}}所做的事情）。为了进行处理和更新，Angular需要编译，这就是将此代码置于element.attr(val)阶段时会发生的情况。

如果您希望在compile阶段工作，则需要手动编译生成的HTML，以便设置所有观察者并绑定绑定。

link

在custom指令中动态添加angular指令不起作用

1 个答案: