在自定義指令中動態添加角度指令不起作用

使用我的自定義指令我想將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

在自定義指令中動態添加角度指令不起作用

回答

相關問題