AngularJS調用指令功能有或沒有控制器參數

我在互聯網上搜索了很多，但我沒有找到任何我正在尋找的好例子。這可能是由於我是angularjs中的新人。AngularJS調用指令功能有或沒有控制器參數

我在看什麼，我有一些常見的功能，我需要從控制器的不同情況下觸發，或者可能來自不同的指令，在指令或任何事情內。

權可不是我現在有兩個情況，1）上的focusIn和事件的內容我想給邊境其父包裝此我將這些功能：

module.directive("myDirective", function(){ 
    return {   
     restrict: 'A', 
     link: function(scope, element, attrs){ 
     scope.focusIn = function($event){ 
     angular.element($event.target).parent().addClass('focus'); 
     } 
     scope.focusOut = function($event){ 
     angular.element($event.target).parent().removeClass('focus'); 
     } 
});

現在的問題是我如何能從HTML代碼調用這些功能，如我有HTML代碼：

<div class="wrapper"> 
    <input type="text" my-directive="focusin($event)"> 
</div>

由於上述代碼不起作用。

現在第二個問題與上面類似。我已經創建了一個密碼強度模塊。我在哪裏檢查密碼強度。這個指令我工作正常，但我無法從我的控制器之一調用此指令功能。

module.directive("passwordStrength", function(){ 
    var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[[email protected]#\$%\^&\*])(?=.{8,})"); 
    var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"); 
    return {   
     restrict: 'A', 
     link: function(scope, element, attrs){ 
      scope.$watch(attrs.passwordStrength, function(value) { 
       if(angular.isDefined(value)){ 
        if(strongRegex.test(value)) { 
         scope.strength = 'strong'; 
        } else if(mediumRegex.test(value)) { 
         scope.strength = 'medium'; 
        } else { 
         scope.strength = 'weak'; 
         scope.loginForm.$invalid = true; 
        } 
       } 
      }); 
     } 
    }; 
}); 
<input type="password" placeholder="••••••" class="input-field clearfix password" ng-focus="focusIn($event)" password-strength="focusOut($event)" ng-minlength="8" ng-maxlength="20" name="password" ng-model="loginData.password" required password-strength="loginData.password">

上面的代碼工作正常的密碼強度，但我想上面的代碼中調用用戶提交表單和ng-submit功能應該調用密碼強度功能。請在這方面幫助我。

Plunkr

來源

2015-11-02 Mandy

說你能提供樣品plunkr？ – Grundy

我的plunkr沒有保存... – Mandy

你的意思是_not saving_？所以保存它:-) – Grundy

我希望我正確地理解你的問題;

廣告1）你可以使用jQuery的元素element在link功能捕獲指令的元素上的事件：

element.focus(function(event, args) { 
    element.parent().addClass('focus'); 
}); 

element.blur(function(event, args) { 
    element.parent().removeClass('focus'); 
});

廣告2）我建議你將你的passwordStrength功能的代碼放到一個service和在您的輸入元素上使用ng-change調用該函數。

來源

2015-11-02 10:23:54 65756C626F74

1）這是dom指令的基本版本，它將焦點的背景顏色設置爲焦點。

.directive('domDirective', function() { 
     return { 
      restrict: 'A', 
      link: function ($scope, element, attrs) { 
       element.on('focus', function() { 
        element.css('background-color', 'yellow'); 
       }); 
       element.on('blur', function() { 
        element.css('background-color', 'white'); 
       }); 
      } 
     }; 
    });

你可以按照這個Plunker看到它在行動。

2）我的建議是在本JSFiddle

來源

2015-11-02 12:14:29

OP已經有這個 – Grundy

AngularJS調用指令功能有或沒有控制器參數

回答

相關問題