AngularJS - ngClick不工作的动态添加HTML [英] AngularJS - ngClick not working on dynamically added html
问题描述
我有一个简单的应用程序中，我有一个 MYLIST 模式单一输入元素。
如果 MYLIST = 1 我NG-包括first.html如果 MYLIST = 2 我NG-包括second.html。到现在为止还挺好。
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
我的问题是，在每一个HTML模板我有一个按钮，按下时，我想改变 MYLIST 的值，这样我就可以浏览到其他，为了做到这一点我做的：
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
但NG-点击不起作用。为什么呢？
but ng-click doesn't work. Why?
下面是我的code：
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
推荐答案
NG-包括创建的子范围。所以，你应该绑定到，而不是一个对象的属性原始。
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=$p$ PVIEW
这篇关于AngularJS - ngClick不工作的动态添加HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
