編譯自定義指令

我想在其他自定義指令內動態添加自定義驗證指令。它適用於像「required」這樣的系統角度指令，但不適用於自定義驗證指令。編譯自定義指令

我有指令'controlInput'與輸入，我動態地添加指令'testValidation'（在實際應用中從控制輸入的數據依賴）。

<control-input control-data='var1'></control-input>

指令：

app.directive('controlInput', function ($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    template: '<div><input type="text" ng-model="var1"></div>', 
    link: function (scope, elem, attrs) { 

     var input = elem.find('input'); 
     input.attr('required', true); 
     input.attr('test-validation', true); 
     $compile(elem.contents())(scope); 
    } 
    }; 
}); 
app.directive('testValidation', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     ctrl.$parsers.unshift(function (value) { 
     if (value) { 
      var valid = value.match(/^test$/); 
      ctrl.$setValidity('invalidTest', valid); 
     } 
     return valid ? value : undefined; 
     }); 
    } 
    }; 
});

完整的示例http://plnkr.co/edit/FylMfTugHrotEMSQyTfT?p=preview

在這個例子中，我還添加簡單的輸入，以確保 'testValidation' 指令工作。

感謝您的任何答案！

來源

2014-07-08 Lubov Vashpa ova

任務是通過http請求和表單字段的描述來構建表單。字段示例json是{type：'text'，value：'[email protected]'，名稱：'email'}。驗證規則，我們可以通過字段「name」來定義 –

我認爲你必須要求：'ngModel'，因爲在文檔中它說：定義你自己的驗證器可以通過定義你自己的指令來添加一個自定義驗證函數到ngModel控制器。 – Lrrr

是的，我做到了： 'app.directive（ 'testValidation'，函數（）{ 回報{ 限制： 'A'，要求： 'ngModel'， ... }' 或者你的意思是別的嗎？ –

編輯：

我建議你在controlInput指令更改模板修復您的原始程序：

template: '<div><input type="text" testdir required ng-model="var1"></div>'

我不明白爲什麼不去做呢如上所述，但另一種方法是用新編譯的輸入替換輸入：

input.replaceWith($compile(elem.html())(scope));

注：

變化

var valid = value.match(/^test$/);

要

var valid = /^test$/.test(value);

從MDN：

String.prototype.match()

返回值

array一個包含匹配結果的數組，如果沒有匹配，則返回null。

RegExp.prototype.test()返回你需要的，一個布爾值。

來源

2014-07-08 07:00:21 Mosho

謝謝，修復它。但問題仍然存在。這個指令工作的很好，如果像這樣添加''input test-validation =「true」required ng-model =「var2」/>'，但如果應用'$ compile（elem.contents（）） ;'改變輸入的屬性後。 –

nvm，我現在看，在它上面 – Mosho

@LubovVashpaova編輯。 – Mosho

編譯自定義指令

回答

相關問題