Question

我正在尝试召唤一个元素集中在模态指令中调用该指令后，第一次调用focus-me指令我尝试在对话框指令中添加focus-me元素，如Plunker所示以下是我在指令中尝试的内容。

显示模态对话框[working]
显示对话框后我试图将一个specfic元素聚焦在对话框中[我为其添加了watch-element指令中的watch元素]
焦点只是第一次发生。
Plunker
请帮助，如何触发上述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>"
  };
});

Answer 1

我在指令中找到了问题的解决方案 $ scope.apply我正在应用它模型而不是我应该用于焦点元素。
更新后的焦点指令我已经在下面复制了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() {

        scope.$apply(function()
                     {
          attrs.focusMe=!attrs.focusMe;
        })
         })

    }
  };
});

Working Plunker

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

1 个答案: