AngularJs - 顯示隱藏密碼的單擊事件使用指令

我有密碼和一個輸入字段與輸入字段
現在一個按鈕，如果輸入字段的類型是密碼即type="password"，然後在該按鈕的點擊它應該成爲文本即type="text"
如果我再次點擊同一按鈕，它應該改變type="password"AngularJs - 顯示隱藏密碼的單擊事件使用指令

意味着它應該觸發類型的輸入元素的value

我已經完成了這個使用控制器，它與控制器工作正常。以下爲使用控制器

但不是控制器的工作代碼，如果我想使用的指令那麼如何使用指令

目的來處理此切換的條件 - 我想使用多輸入元素此功能

HTML

<div class="input-group"> 
    <label>Password</label> 
    <input type="{{inputType}}" class="form-control" ng-model="password" /> 
    <span ng-click="show()">show</span> 
</div>

控制器

$scope.inputType = 'password'; 

$scope.show = function() { 
    if ($scope.inputType === 'password') { 
    $scope.inputType = !$scope.inputType; 
    $scope.inputType = 'text'; 
    } else { 
    $scope.inputType = !$scope.inputType; 
    $scope.inputType = 'password'; 
    } 
}

我試着用指令 - 下面是我的審判代碼
我沒有得到如何使用指令

指令

.directive('myDir', function() { 
    require: 'ngModel', 
    link: function (scope, element, attrs) { 
     console.log(attrs.type); 
     attrs.type = 'password' 

     // how to call this below code on click event or on click of <span> 
     which I am using for password 

     if (attrs.type === 'password') { 
      attrs.type = !attrs.type; 
      attrs.type = 'text'; 
     } else { 
      attrs.type = !attrs.type.inputType; 
      attrs.type = 'password'; 
     } 
    } 
})

HTML使用改變<input />元素的類型指令

<div class="input-group"> 
    <label>Password</label> 
    <input my-dir type="" class="form-control" ng-model="password" /> 
    <span ng-click="show()">show</span> 
</div>

來源

2017-04-14 ojus kulkarni

你希望別人爲你創建一個指令？ – Tuhin

@Tuhin我已經添加了我的試用指令代碼 - 我沒有得到如何使用指令 –

更改類型，因此沒有內置指令。你需要編寫一個自定義指令。看看這個。你可能會得到一些想法http://stackoverflow.com/questions/39247705/ng-type-show-password-directive-on-input-element-in-angularjs – Tuhin

您可以使用ng-attr-type指令動態更改輸入類型。例如：

<input ng-attr-type="{{ isPassword ? 'password' : 'text' }}">

您可以將isPassword的值更改爲click事件並使其切換。

使用指令按鈕

.directive('isPassword', function() { 
    return { 
    restrict : 'A', 
    scope: { 
     isPassword: '=isPassword' 
    }, 
    link: function (scope, element, attrs) { 
     scope.$watch('isPassword', function(a, b){ 
     element.attr('type', a ? 'password' : 'text') 
     }) 
    } 
    } 
}); 

<input is-password="checkPassword" placeholder="Put your password" /> 

<input type="checkbox" ng-model="checkPassword" />

更新單擊

<button ng-click="checkPassword=!checkPassword">click</button>

來源

2017-04-14 12:51:25 Gaurav

謝謝，但我有一個疑問 - 點擊事件在哪裏？所以點擊該按鈕時，它應該切換條件的密碼 –

我已經更新了我的答案切換密碼類型的狀態，或者你可以使用任何元素上的點擊事件從控制器切換 – Gaurav

這隻適用於<<輸入類型=「複選框」/>'不在按鈕上。但我希望在點擊按鈕的情況下。像： - 而不是複選框它應該在點擊按鈕上工作，在這種情況下如何實現這一點？ –

這是當添加到輸入要素以下指令做什麼。

它附加了一個span元素「顯示我」，附帶有ng-click=show()事件。
scope: true爲該指令啓用一個獨立的範圍。這確保功能show()對每個指令都是唯一的。
當單擊「顯示我」時，該指令會更改該元素的輸入類型。

希望這會有所幫助。

JSfiddle link

來源

2017-04-14 22:22:40 gilango

謝謝，@gilango這一個工作正常，但如果我我在同一個''元素上使用了多個指令，這個時候我得到了隔離範圍的錯誤。如果我刪除了'scope = true'，那麼上面的模塊無法正常工作，請你指導我如何處理這個場景中的隔離範圍 –

這意味着你的其他指令也有一個孤立的範圍。在同一元素中使用的2個指令不能具有它們自己的獨立範圍。由於show方法，不知道如何在沒有隔離範圍的情況下構建此指令。也許你可以將這兩個指令組合成單個指令？ – gilango

AngularJs - 顯示隱藏密碼的單擊事件使用指令

回答

相關問題