在链接函数中使用AngularJS指令中的绑定函数

时间:2015-10-12 21:03:57

标签: angularjs angularjs-directive

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

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

我想我在这里遗漏了一些东西,但我在Google上找到的唯一例子就是在模板中使用这个功能而我不想这样做。

感谢您的帮助

2 个答案:

答案 0 :(得分: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 }); }

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

答案 1 :(得分:1)

您的template功能缺失的第一件事"可能不是问题,但您应该修复它,同时您的load_page期待increment参数。当您在调用ng-click方法时未通过load_page函数传递任何内容时,此行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>