簡體   English   中英

將一些屬性傳遞給AngularJS中的指令

[英]Pass some properties to a directive in AngularJS

我創建了一個指令(itcValidationMessages),它將讓我顯示驗證消息,並將其作為屬性放在表單元素上,如下所示:

<form id="register-form" novalidate ng-submit="register()" itc-validation-messages ...

我在上面提到的指令遍歷表單中的所有輸入元素,並在任何人具有無效狀態時顯示錯誤消息。

我將驗證消息存儲在單獨的文件中(因為可能有很多它們,我想為i8n做准備,所以我將它們與指令分開),如下所示:

angular.module('models.ValidationMessages', []).constant("ValidationMessages", {
validationMessages: {
    required: 'Value is required!',
    email: 'You should enter a valid email address!',
    minlength: 'Enter more characters!',
    maxlength: 'You have entered to many characters!'
}

});

將這些消息保持不變是否正確?

我有一個每個驗證器的默認消息,但我想讓每個輸入添加一個自定義消息,例如:

<input type="password" minlength-message="Your password should has at least 3 characters"

什么是最好的方法呢? 因為為什么我使用上面的屬性(minlength-message)我不能使用$observe從我的指令訪問它。 我不想聲明一個對象並將這些自定義消息放在一個地方,因為我應該在每個消息中添加一個輸入名稱以識別它們屬於哪個輸入。 因此,我試圖找到一些方便和根據藝術解決方案。

我不需要itcValidationMessages指令中的隔離范圍,我不希望為每個驗證器(如minlengthMessage)提供單獨的指令,以將特定的驗證消息傳遞給我的指令,該指令應顯示此消息(itcValidationMessages)。

以下是如何從指令訪問數據的示例:

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                minlengthMessage:'@'
            }        
        };
    })

所以現在你可以從中獲取字符串

$scope.minlengthMessage

您還可以使用傳遞給指令鏈接功能的attrs。

這是一個例子:

.directive('minlength', function () {
     return {
          restrict: 'EA',
          link: function ($scope, $element, $attrs) {
              var myDirectiveParam = $attrs.minlengthMessage;
          }
     };
})

在你的HTML中:

<input minlength minlength-message="Your message here.." />

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM