在自定义指令中动态添加角度指令不起作用

使用我的自定义指令我想将ng模型从根指令移动到子元素输入元素。出于某种原因，该模型不适用于子元素。下面是代码在自定义指令中动态添加角度指令不起作用

标记：

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

当我使用编译，而不是链接这个确切的事情的作品。任何人都可以告诉这种行为的原因和方式，我可以实现这种行为使用链接。

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没有更新model.Can你请解释什么是缺少的。

来源

2015-04-01 SuneelKumar Vanapalli

即使没有'$ compile'也适用于我。我可以看到ng-model添加到输入标签。你的角度版是什么？我是1.3.13 – Dinesh 2015-04-01 01:00:13

你怎么能说ng-model正在工作。当复选框被选中/取消选中时。模型是否改变？ – 2015-04-01 03:57:43

对不起： - （但如果你在问题陈述中更加明确，本来会更好，“不工作”通常没有足够清晰jimho ... – Dinesh 2015-04-01 04:55:14

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

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

var input = element.children('input'); 
input.attr('ng-model',element.attr('ng-model')); 
$compile(input)($scope);

来源

2015-04-01 01:04:45 floribon

谢谢，它现在工作了，请你解释一下为什么它没有做任何事情可以用于编译功能 – 2015-04-01 03:57:04

没问题，那是因为这是编译阶段的一个重点：你根据属性和绑定生成一些HTML，并且HTML将被编译，然后在链接阶段，实际上，你的指令在编译阶段有这个代码更有意义 – floribon 2015-04-01 04:06:13

这是真的，但我有一个额外的逻辑，我必须注意这个模型。基于模型的价值，我需要添加一个css类请让我知道如果我没有解释清楚 – 2015-04-01 04:28:05

在自定义指令中动态添加角度指令不起作用

回答

相关问题