Scope's eval returns undefined in an AngularJS directive

问题

Background: I'm trying to run a callback when something inside the code of a directive in AngularJS happen.

Pertinent code:

HTML:

<img-cropper onselect="updateAvatarData" x="100" y="100" src="{{tempAvatar}}" id="avatarCropper"/>

Controller:

$scope.updateAvatarData = function(c){
    alert("¡¡¡Funciona!!!!");
};

Directive:

<<more code up here>>

link: function(scope,element, attr) {
  scope.wsId = attr.id+'WS';
  scope.pvId = attr.id+'preview';
  scope.x = attr.x;
  scope.y = attr.y;
  scope.aspectRatio = scope.x/scope.y;
  scope.previewStyle = "width:"+scope.x+"px;height:"+scope.y+"px;overflow:hidden;";
  scope.onSelectFn = scope.$eval(attr.onselect);

<<more code down here>>

The problem is in that last line "scope.onSelectFn = scope.$eval(attr.onselect);". That "scope.$eval(attr.onselect);" returns 'undefined'. The attr.onselect works fine, it returns the name of the function typed on the 'onselect' attribute.

I have made others directives with functions passed via attibutes with no problem, but am unable to find what I am doing wrong here.

Thanks in advance

回答1:

Why you are doing like this when u can easily use '&' feature available with angular

calling method of parent controller from a directive in AngularJS

Still if you want to call parent function like this then you should be using $parse instead of eval see a very below small example when using

  link: function (scope,element,attrs) {
                   var parentGet = $parse(attrs['onselect']);

                   var fn = parentGet(scope.$parent);
                   fn();

               },

回答2:

scope.$eval(attr.onselect) should work.

Here is a working fiddle (tested in Chrome) with a minimal link function:

link: function(scope, element, attr) {
    scope.onSelectFn = scope.$eval(attr.onselect);
    console.log(attr.onselect, ',', scope.onSelectFn);
    scope.onSelectFn();
},

The only other thing I can think of is that since onselect is an HTML attribute, maybe it doesn't work on some other browsers. So maybe try using a different attribute name.

回答3:

By default, $eval only evaluates the given expression against the current scope. You can pass in a different data object to evaluate against, and in your case it is the parent scope. You should call it like this:

scope.onSelectFn = scope.$eval(attr.onselect, scope.$parent);

See the documentation here

来源：https://stackoverflow.com/questions/16970876/scopes-eval-returns-undefined-in-an-angularjs-directive

标签

html

angularjs

callback

directive