Question

背景：我正在尝试在AngularJS中的指令代码中发生某些事情时运行回调。

相关代码：

HTML：

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

控制器：

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

指令：

<<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>>

问题在于最后一行“scope.onSelectFn = scope。$ eval（attr.onselect）;”。那个“范围。$ eval（attr.onselect）;”返回'undefined'。 attr.onselect工作正常，它返回在'onselect'属性上键入的函数的名称。

我已经通过attibutes传递了其他函数的指令没有问题，但是我无法在这里找到我做错的事。

提前致谢

Answer 1

当你可以轻松使用'＆amp;'时，为什么你这样做？功能可用角度

calling method of parent controller from a directive in AngularJS

如果你想像这样调用父函数，那么你应该使用$ parse而不是eval在使用时看到一个非常小的例子

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

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

               },

Answer 2

scope.$eval(attr.onselect)应该有用。

以下是working fiddle（在Chrome中测试过），具有最小链接功能：

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

我唯一可以想到的是，自onselect is an HTML attribute以来，它可能不适用于其他浏览器。所以也许尝试使用不同的属性名称。

Answer 3

默认情况下，$eval仅针对当前范围评估给定表达式。您可以传入不同的数据对象进行评估，在您的情况下，它是父作用域。你应该这样称呼它：

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

请参阅文档here

范围的eval在AngularJS指令中返回undefined

3 个答案: