范圍函數在使用角度的指令鏈接中無響應

Question

這是我的html

<example-directive id="my_id" ng-blur="test()"></example-directive>

這是我的指令

app.directive('exampleDirective', function() {
  return {
    restrict: 'AE',
    scope: {
       label: "@",
    },
    template: '<span class="some_input"> <input required/></span>',
    controller: function($scope, $element){
    },
    link: function(scope, el, attr) {
     // this is not responsive when blur out
      scope.test = function(){
        console.log("what is up");
      }
     // this is responsive when blur out
     el.on('blur', function(){
      console.log("this is up");
       });
    }
  }
})

當我

$("#my_id").blur()

僅在控制台中

"this is up"

出現

我不確定在example-directive發生模糊事件時為什么無法訪問范圍函數

Answer 1

當您在自定義元素上使用模糊事件時，它將無法正常工作。 您需要在隔離范圍內傳遞該元素，以便該指令可以通過在隔離范圍內添加blur: '&ngBlur'來訪問該方法。 其中， blur變量允許訪問指定的ngBlur屬性函數。

scope: {
   label: "@",
   blur: '&ngBlur'
},

然后，您可以在指令blur事件中使用該事件

 el.on('blur', function(){
    console.log("this is up");
    //here we need to run digest cycle manually,
    //as we are dealing from outside angular context.
    $timeout(function(){ //include `$timeout` dependency in directive
        scope.blur();
    });
 });