Question

我在互联网上搜索了很多，但我没有找到任何好的例子来表达我的看法。这可能是由于我是angularjs的新手。

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

对，不是我有两种情况，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）您可以使用private int focusedItem = 0; @Override public void onAttachedToRecyclerView(final RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); // Handle key up and key down and attempt to move selection recyclerView.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { RecyclerView.LayoutManager lm = recyclerView.getLayoutManager(); // Return false if scrolled to the bounds and allow focus to move off the list if (event.getAction() == KeyEvent.ACTION_DOWN) { if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) { return tryMoveSelection(lm, 1); } else if (keyCode == KeyEvent.KEYCODE_DPAD_UP) { return tryMoveSelection(lm, -1); } } return false; } }); } private boolean tryMoveSelection(RecyclerView.LayoutManager lm, int direction) { int tryFocusItem = focusedItem + direction; // If still within valid bounds, move the selection, notify to redraw, and scroll if (tryFocusItem >= 0 && tryFocusItem < getItemCount()) { notifyItemChanged(focusedItem); focusedItem = tryFocusItem; notifyItemChanged(focusedItem); lm.scrollToPosition(focusedItem); return true; } return false; } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { PlayListItem nature = mItems.get(i); try { if (nature.getmInnerTitle() != null && nature.getmInnerTVName() != null) { viewHolder.tvInnerTitle.setText(nature.getmInnerTitle()); mVideoID = nature.getmInnerVideoID(); Picasso.with(activity) .load(nature.getmInnerThumpnailURL()) /* .placeholder(R.drawable.my_thumnail_small)*/ .into(viewHolder.imgInnerThumbnail); viewHolder.tvInnerTVName.setText("by " + nature.getmInnerTVName()); } } catch (NullPointerException e) { e.printStackTrace(); } viewHolder.itemView.setSelected(focusedItem == i); viewHolder.itemView.post(new Runnable() { @Override public void run() { int cellWidth = viewHolder.itemView.getWidth();// this will give you cell width dynamically int cellHeight = viewHolder.itemView.getHeight();// this will give you cell height dynamically mdynamicHeight.HeightChange(i, cellHeight); //call your iterface hear } }); } @Override public int getItemCount() { return mItems.size(); } class ViewHolder extends RecyclerView.ViewHolder { public ImageView imgInnerThumbnail; public TextView tvInnerTitle; public TextView tvInnerVideoID; public TextView tvInnerCount; public TextView tvInnerTVName; public View item_view; public ViewHolder(View itemView) { super(itemView); imgInnerThumbnail = (ImageView) itemView.findViewById(R.id.img_innerView); tvInnerTitle = (TextView) itemView.findViewById(R.id.txt_InnerTitle); //tvInnerID = (TextView) itemView.findViewById(R.id.); tvInnerTVName = (TextView) itemView.findViewById(R.id.txt_InnerTVName); item_view = itemView; item_view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { notifyItemChanged(focusedItem); focusedItem = getLayoutPosition(); notifyItemChanged(focusedItem); } }); } }函数中的jQuery元素element来捕获指令元素上的事件：

link

ad 2）我建议您将element.focus(function(event, args) { element.parent().addClass('focus'); }); element.blur(function(event, args) { element.parent().removeClass('focus'); });函数的代码移到service，然后在输入元素上使用passwordStrength调用该函数。

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

所述

AngularJS使用或不使用Controller的参数调用指令函数

2 个答案: