Question

我正在尝试构建一个指令，为分页控件（Twitter Bootstrap样式）输出一些HTML格式的代码，该指令需要从我的控制器范围获取当前页面和总页面，并且当分页链接是单击触发我的控制器上的一个功能来更改页面（构建一个URL并调用$ location来更改页面）。

我观看了许多优秀的YouTube angularjs视频（http://www.youtube.com/watch?v=nKJDHnXaKTY），但似乎都没有涵盖这个特殊的复杂场景。

任何帮助都会很棒！

这是更简洁的jsfiddle：

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

我无法正常工作的是传递参数，我得到：

changing page to: undefined

Answer 1

在你的指令中添加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) {

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

修改：更新了小提琴http://jsfiddle.net/dVFDT/48/

为未来搜索者修改的答案：您通过点击方式传递的功能如下：

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

需要改为：

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

这意味着你传递函数而不是函数调用。这意味着在你的指令中连接changePage回调时，你用这样的索引调用函数：

changePage()(1)

这就是你未定义的原因。

Answer 2

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

尝试：

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

Answer 3

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

你可以在这里看到小提琴：Fiddle

最感兴趣的行在模板声明中。对onClick的调用要求您传递一个对象而不仅仅是值。

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

这也使用了来自this answer from Gloopy的过滤器，以便在n中迭代ng:repeat次。这允许在模板中发生所有绑定。

AngularJS指令ng-click参数未被传递

3 个答案: