AngularJS从控制器调用带参数或不带参数的指令函数

Question

我已经在互联网上搜索了很多，但我没有找到任何好的例子，我正在寻找。这可能是因为我是新手。

我正在寻找的，我有一些共同的功能，我需要在不同的情况下，从控制器，或可能来自不同的指令，在指令或任何事情。

对，不是我有两种情况，1)在focusin和focusout上，我想给它的父包装器提供边界，为此我写了这些函数：

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])(?=.*[!@#\$%\^&\*])(?=.{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

Answer 1

我希望我能正确理解你的问题；

ad 1)您可以在link函数中使用jQuery元素element来捕获指令元素上的事件：

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

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

AD2)我建议您将passwordStrength函数的代码移动到service中，并在您的input元素上使用ng-change调用该函数。

Answer 2

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中所述