Question

我正在使用angularJS制作SAP。我遇到的问题是在我的一个模板文件中。

我想使用在该控制器中声明的变量来设置ng-click指令的值。根据该变量值的变化，ng-click的值应该改变。以下是问题的一个示例：

<p>Set page content template via button click</p>
<!-- Actual values of ng-click without variables -->
<button ng-click="template='page1'">Show Page 1 Content</button>
<button ng-click="template='page2'">Show Page 2 Content</button>

<!-- What I have tried

Declaring a scope variable 'page', and setting it's value to 'page1' as

        $scope.page = "page1";

<button ng-click="template=page">Show Page 1 Content</button>
<button ng-click="template='{{page}}'">Show Page 1 Content</button>
<button ng-click="template=(page)">Show Page 1 Content</button>

Also tried declaring the variable as

$scope.page = "template='page1'"; or $scope.page = template='page1'

And inject like:

<button ng-click=page>Show Page 1 Content</button>
and also using (page), {{page}}, page ; with and without quotes

-->

<ng-include src="template"></ng-include>

<script type="text/ng-template" id="page1">
    <p>This is content of page 1</p>
</script>

<script type="text/ng-template" id="page2">
    <p> This is content of page 2</p>
</script>

ng-click的值应该基于分配给它的变量的值。

编辑：

刚刚发现我们只能使用ng-click指令调用函数，而不能调用变量。因此，无法分配变量。但我不能说它是否仍然是真的，而且仍无法做到。

问题链接：Angular JS set dynamic value into ng-click directive

但是有没有其他方法可以实现这一目标。任何帮助将非常感激。谢谢。

Answer 1

我能想到的最简单的方法是创建一个函数，将页码作为控制器上的参数，并用它来设置控制器上的页码变量。

$scope.pageNumber = 1;
$scope.setPage = function(pageNumber) {
    $scope.pageNumber = pageNumber
};

然后调用控制器函数将它传递给你想要的页面。

<button ng-click="setPage(1)">Show Page 1 Content</button>
<button ng-click="setPage(2)">Show Page 2 Content</button>

Answer 2

试试这个：

    <button ng-click="template='page1.html'">Show Page 1 Content</button>
    <button ng-click="template='page2.html'">Show Page 2 Content</button>
    <ng-include src="template"></ng-include>

虽然我强烈建议使用指令或组件而不是ng-include。

Plunkr

根据分配给它的变量设置ng-click指令的值

2 个答案: