在AngularJS指令的link函数中使用bound函数

Question

我正在写一个指令，它看起来像这样:

return {
    restrict: 'E',
    replace: false,
    scope: {
        getl: '&'
    },
    template: function()
    {
        return '<div data-ng-click="load_page(1)"></div>';
    },
    link: function(scope)
    {
        scope.current_page = 1;
        scope.load_page = function(increment)
        {
            scope.current_page += increment;
            scope.getl(scope.current_page);
        }
    }
};

我像这样调用这个指令:

<pager list="events" max="max_page" getl="get_events()"></pager>

我想做的是能够从我的指令的"链接"函数调用"getl"函数，但当我这样做时，我得到以下错误:

TypeError: Cannot use 'in' operator to search for 'f_get_events' in 2

我想我在这里错过了一些东西，但我在谷歌上找到的唯一例子是在模板中使用函数，我宁愿不这样做。

谢谢你的帮助

Answer 1

这里有几件事:

• 你的模板是一个破碎的字符串，因为你在load_page之后使用了一个单引号，而在结束div之后没有关闭单字符串:

  template: function() { return '<div data-ng-click="load_page()'></div>; },

• 你可以像这样在指令中调用作用域方法:

  • 向get_events()调用传递一个参数:<pager list="events" max="max_page" getl="get_events( currentPage )"></pager>
  • 然后在指令代码中通过传入一个带有属性的对象来使用该参数，该属性与参数名称相对应:

  scope.load_page = function(increment) { scope.current_page += increment; scope.getl({ currentPage: scope.current_page }); }

您给出的类型错误很难解释，因为很难知道它是否仅仅是因为我上面描述的模板字符串问题，还是其他原因。

Answer 2

首先，您的template函数缺少"，这可能不是问题，但您应该修复它，您的load_page也期望increment参数。由于在调用load_page方法时没有从ng-click函数传递任何信息，因此这一行scope.current_page += increment;当前页面的值变为undefined，因为1 + undefined = undefined

template: function()
{
    return '<div data-ng-click="load_page(1)"></div>';
},

控制器

scope.load_page = function(increment) {
    scope.current_page += increment;
    scope.getl({ curPage: scope.current_page});
}

标记

<pager list="events" max="max_page" getl="get_events(curPage)"></pager>