使用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.