使用AngularJS中的动态元素
[英]Work with dynamic elements in AngularJS
问题描述
我试图用一个显示在html中的变量和一个增加它的函数来创建一个简单的计数器，并且它有效。 但是当我试图在初始化步骤（init（））中在javascript中显示相同的变量时，此轮廓不再起作用，或者只是无法正确显示。 我试图用$ compile解决这个问题，但效果不好。 请告诉我哪里有错误？
我的HTML代码是：
<body class="max_height" ng-app="myApp">
<div class="container max_height" ng-controller="myCtrl">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-3 col-lg-offset-3 text-center" id="play" tabindex="0" ng-init="init()">
{{ contor }}
</div>
<button id="increment" ng-click="increment()">Increment</button>
</div>
<script src="js/angular.min.js"></script>
<script src="js/script2.js"></script>
</body>
我的javascript代码是：
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $compile) {
$scope.contor = 0;
$scope.init = function() {
var element = angular.element(document.querySelector('#play'));
var generated = element.html('<h3>'+$scope.contor+'</h3>');
$compile(generated.contents())($scope);
}
$scope.increment = function(){
$scope.contor ++;
}
});
所以我的问题是：为什么当加载id的div时，计数器的静态变量会自动更改，并且当javascript中加载相同的div时，函数init（）不再更改计数器的变量。
2 个解决方案
解决方案1
2 已采纳 2016-01-01 12:00:02
为什么当加载id的div时，计数器的静态变量会自动更改，并且当javascript中加载相同的div时，函数init（）不再更改计数器的变量。
因为你做错了。
这里'<h3>'+$scope.contor+'</h3>'你得到字符串'<h3>0</h3>'因为你可以看到这个字符串不依赖于任何变量。
所以，你应该把它改成
'<h3>{{contor}}</h3>'
最好不要在控制器内部使用编译服务，只需将html更改为
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-3 col-lg-offset-3 text-center" id="play" tabindex="0" ng-init="init()">
<h3>{{ contor }}</h3>
</div>
解决方案2
1 2016-01-01 11:42:08
在您的控制器中，您没有调用$ scope.init（）。 这就是为什么这不起作用。
使用var generated = element.html('<h3>'+contor+'</h3>');
相反， var generated = element.html('<h3>'+$scope.contor+'</h3>');
angularjs创建动态表单元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.