在AngularJS中，$watch不会在一个指令被启动后被调用

$watch isn't called after one directive is initiated in AngularJS

本文关键字：调用 一个 指令 启动 AngularJS watch      更新时间：2023-09-26

我正在尝试调用一个元素的焦点在模态指令。
在该指令被调用之后，focus-me指令只会被第一次调用。
我尝试在对话框指令中添加focus-me元素，如Plunker所示。下面是我在指令中尝试的事情。

  1. 显示模式对话框[working]
  2. 对话框显示后，我正试图聚焦对话框中的特定元素[为此我在focus-me指令中添加了watch元素]
  3. 焦点只是第一次发生。
    砰砰作响
    请帮助，如何触发手表元素上的指令为上述Plunker。非常感谢。

下面是我当前使用的焦点和对话框的指令代码。

app.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].select(); 
            element[0].focus(); 
          });
        }
      });
      element.bind('blur', function() {
        console.log('blur')
        scope.$apply(model.assign(scope, false));
      })
    }
  };
}).directive('modalDialog', function(){
   return {
    restrict: 'AE',
    scope: {
      show: '=',
    focusDesign:'=focusDesign'
    },
    replace: true, 
    transclude: true, 
    link: function(scope, element, attrs) {

      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      if (attrs.focusDesigniso)
        scope.focusDesigniso=attrs.focusDesigniso;
      scope.hideModal = function(focusDesign) {
        scope.show = false;  
        focusDesigniso=false;
          //$scope.focusDesign=false;
      };
     scope.hideModalC = function() {
         alert("I m in hide");
         scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal(focusDesign)' ng-model='focusDesign'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal(focusDesign)' ng-model='focusDesign'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

我在指令中找到了问题的解决方案。
美元的范围。我正在应用它的模型，而不是我应该使用的焦点元素。
更新后的焦点指令我已经复制到下面与工作的活塞

   app.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].select(); 
            element[0].focus(); 
          });
        }
      });
      element.bind('blur', function() {
        scope.$apply(function()
                     {
          attrs.focusMe=!attrs.focusMe;
        })
         })
    }
  };
});

工作活塞

相关文章：