AngularJS指令ng-click没有传递参数

AngularJS directive ng-click parameters not being passed

本文关键字：参数 指令 ng-click AngularJS      更新时间：2023-09-26

我试图建立一个指令输出一些HTML格式的代码分页控制(Twitter Bootstrap风格)，该指令需要采取当前页面和总页面从我的控制器的范围，当分页链接被点击触发我的控制器上的一个函数来改变页面(构建一个url和调用$location改变页面)。

我在YouTube上看过很多优秀的angularjs视频(http://www.youtube.com/watch?v=nKJDHnXaKTY)，但似乎没有一个涉及到这个特殊的复杂场景。

任何帮助将是伟大的!

下面是让它更清晰的jsfiddle:

http://jsfiddle.net/philjones88/dVFDT/

我不能工作的是传递参数，我得到:

changing page to: undefined

在您的指令中添加changePage调用(我知道它不是您想要的地方)。使用相同的参数调用父作用域changePage。

$scope.changePage = function(index){
    console.log("running changePage");
    $scope.$parent.changePage(index); //might want to check if the parent scope has this too
}

作为另一个提示，在指令中，你不应该在被发送的变量前面使用$。在本例中是$scope， $element， $attrs。在控制器(不是链接函数)的作用域前面看到的$是用来让你知道它正在被注入的。它没有被注入到链接控制器中。例如:

app.directive("pager", function ($injector1, $injector2) {

这是注入参数的位置，您希望能够区分它们两个。我意识到这有点偏离轨道，我希望我对修改epage的建议是您正在寻找的。

编辑:更新小提琴http://jsfiddle.net/dVFDT/48/

为将来的搜索者修改的答案:您通过click方法传递的函数如下:

..... click="changePage()".....

需要修改为:

..... click="changePage".....

这意味着你传递的是函数而不是函数调用。这意味着在您的指令中，当您连接changePage回调时，您正在使用索引调用函数，如下所示:

changePage()(1)

我完全不明白，但在你的指令结束时，你想执行你的控制器的功能?

试题:

<div class="pagination">
   <pager current-page="currentPage" total-pages="totalPages" query="query" callback="changePage()"></pager>
</div>

我意识到这个问题有点老了，但实际上有另一种方法来解决这个问题，不需要重新编译或调用父作用域。但是，它确实需要从指令中以一种稍微不同的方式调用该方法。

你可以在这里看到小提琴:小提琴

最令人感兴趣的行是在模板声明中。调用onClick需要向它传递一个对象，而不仅仅是值。

    template: 
    "<div ng:repeat='i in [] | range:totalPages'> " +
        "<a ng:click='onClick({page: i + 1})'>Page {{i + 1}}</a>" +
    "</div>",

这也使用了来自Gloopy答案的过滤器，以便在ng:repeat中迭代n的次数。

相关文章：