如何在AngularJS中的指令内传递函数

时间:2013-03-11 12:50:33

标签: javascript html angularjs

我为用户创建了on-blur指令,该指令在输入字段中显示为

<input type="text" on-blur="doSomething({{myObject}})">

myObject看起来像:

myObject = {a : foo, b : bar ... }

这是我的指令目前的样子:

    myModule.directive('onBlur',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            element.bind('blur',function(){
                console.log('blurrred');
            });

        }
    }
});

触发模糊事件时,如何执行doSomething({{myObject}})功能?

我尝试过这样的事情,但是没有成功:

...
            element.bind('blur',function(){
                console.log('blurrred');
                doSomething(object);
            });
...

2 个答案:

答案 0 :(得分:2)

在内部链接功能中,您可以调用:scope.doSomething()。要评估表达式,您可以执行:scope.$eval(expression),只需使用:scope.myObject来访问范围对象。

当然,这只适用于不能单独工作的指令。

答案 1 :(得分:2)

你的模糊缺少范围。$ apply。它没有引用你的回调函数,你需要在当前范围定义回调函数:

JS:

var app = angular.module('plunker', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.myObject = {a: 'foo', b: 'bar'};

        $scope.doSomething = function(item){
          console.log(item);
        };
      }
    ]
  );

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

HTML:

<div ng-controller="AppController">
  <input ng-blur="doSomething(myObject)" />  
</div>

Working plunker