Javascript 根据分配给ng click指令的变量设置其值

我在用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>

通过单击按钮设置页面内容模板

显示第1页内容
显示第2页内容
这是第1页的内容

这是第2页的内容

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

编辑：

刚刚发现我们只能使用ng click指令调用函数，而不能调用变量。因此，变量不能被赋值。但我不能说这是否仍然是真的，也没有办法做到这一点

问题链接：

---

但是有没有其他方法可以做到这一点呢。任何帮助都将不胜感激。谢谢。

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

$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>

显示第1页内容
显示第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>

显示第1页内容
显示第2页内容

尽管我强烈建议使用指令或组件而不是ng include

---

基本上是在建造穷人的路由器。研究使用

ngRoute

路由器或

angular-ui路由器

。路由器的好处是url将根据您想要使用的任何命名约定匹配模板，并且每条路由都有自己的控制器您可以在

ng单击

中进行变量设置。您链接到的答案是，您不能在ng click表达式中使用插值

{{}

，它是different@charlietfl我也用过ngRoute。最初我是基于url向视图中注入变量值，只有一个模板的内容根据url位置动态更改。但是我和我团队中的其他开发人员（只是说）一起创建这个网站，他们对web开发不太熟悉，也不完全熟悉angular。使用模板和include，让他们更容易使用普通HTML查找和编辑他们的部分。是的，你说得对。正如我所说的，我只是想知道它是否仍然是一样的，或者是否有任何其他方法来实现我想要的。当ngRoute的

$routeParams

和

$location.search（）

使用起来并不复杂时，放弃这种方法似乎是一个奇怪的原因。不仅如此，如果一个人设置了路由，控制器的工作原理仍然与使用

ng include

相同，这就是我一直使用的方法。但是我想根据变量的值更改ng click的值。这是不可能的。您要求的是eval（）语句，这可能是一个太大的安全风险。我会看看Kenny的答案，并将逻辑移到一个函数中。如果我想使用ng click设置变量的值，Kenny的答案是正确的。你可以看到对他的回答的评论。对于eval（）函数，我知道存在安全问题，但仍然尝试过，对我来说不起作用。不可能这样做。我认为存在一些混淆。我不想使用ng click设置变量的a值，而是基于变量的值设置ng click的值。简单地说，如果x=“page1”，那么ng click=x，应该与ng click=“page1”相同；这就是我想要实现的。@Nav042代码中的无理由示例，您说不起作用，不应该起作用

ng click=“template=page”

，但最好使用函数并将逻辑放入控制器中，如此答案所示。使用路由器。。。这个问题的答案是不存在的，并且你有很好的文档化的例子来处理这个问题，只需从控制器传递值，而不是一个静态数字@肯尼，让我试着用你自己的例子更清楚地解释一下。如果我想在单击按钮时将值“setPage（desiredPage）”更改为类似“setMeNow（NoPageDesired）”的值，该怎么办。在您的示例中，您使用ng click更改了值，但cleary说-我不想更改任何变量的值，而是要更改指令的值。我很抱歉。非常感谢你的努力，伙计。