1

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

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

任何帮助都会很棒！

这是 jsfiddle，它使它更清晰：

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

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

changing page to: undefined
4

3 回答 3

2

在你的指令中添加 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 方法传入的函数，如下所示：

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

需要改为：

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

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

changePage()(1)

这就是为什么你变得不确定的原因。

于 2012-12-23T14:26:43.127 回答
0

我不完全理解，但在你的指令结束时你想执行你的控制器的功能吗？

尝试：

<div class="pagination">
   <pager current-page="currentPage" total-pages="totalPages" query="query" callback="changePage()"></pager>
</div>
于 2012-12-23T12:37:12.357 回答
0

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

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

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

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

这也使用了来自 Gloopy的这个答案的过滤器，以便n在ng:repeat. 这允许绑定全部发生在模板中。

于 2013-05-14T20:29:11.713 回答