Question

我有一个简单的应用程序，其中我有一个带有mylist模型的输入元素。如果mylist=1包含first.html，而mylist=2包含second.html。到现在为止还挺好。

我的问题是，在每个html模板中，我都有一个按钮，点击后我想更改mylist的值，这样我就可以导航到另一个，为了实现这个目的，我做了：

<button ng-click="mylist=x" >switch to x</button>

但ng-click不起作用。为什么呢？

这是我的代码：

scripts.js中

var myApp = angular.module('myApp', []);

myApp.controller('MainController',  function ($scope) {

    $scope.mylist = 1;

});

的index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <input type="number" ng-model="mylist" />{{mylist}}
  <br/>
  <div ng-switch on="mylist">

    <div ng-switch-when=1>
      <ng-include src="'first.html'"></ng-include>
    </div>
    <div ng-switch-when=2>
      <ng-include src="'second.html'"></ng-include>
    </div>
  </div>
</body>

</html>

first.html

<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>

second.html

<p>second</p>
<button ng-click="mylist=1">switch to 1</button>

此处还有Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW

Answer 1

ng-include创建child scope。所以你应该bind to an object property而不是原语。

$scope.my = {
  list: 1
};

http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview

AngularJS - ng点击不动态添加的html

1 个答案: