使用AngularJS中的动态元素

Question

I tried to make a simple counter with a variable displayed in html and a function to increment it, and it worked. 我试图用一个显示在html中的变量和一个增加它的函数来创建一个简单的计数器，并且它有效。 But when i tried to display same variable in javascript in initialization step ( init() ) this contour didn't work anymore, or just don't display correctly. 但是当我试图在初始化步骤（init（））中在javascript中显示相同的变量时，此轮廓不再起作用，或者只是无法正确显示。 I tried to solve this problem with $compile but didn't worked well. 我试图用$ compile解决这个问题，但效果不好。 Please tell me where are mistakes? 请告诉我哪里有错误？

My html code is: 我的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>

My javascript code is: 我的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 ++;
    }
});

So my Question is: why when div with id is loaded statically variable for counter is changed automatically and when same div is load in javascript with function init() variable for counter is not changed anymore. 所以我的问题是：为什么当加载id的div时，计数器的静态变量会自动更改，并且当javascript中加载相同的div时，函数init（）不再更改计数器的变量。

Answer 1

why when div with id is loaded statically variable for counter is changed automatically and when same div is load in javascript with function init() variable for counter is not changed anymore. 为什么当加载id的div时，计数器的静态变量会自动更改，并且当javascript中加载相同的div时，函数init（）不再更改计数器的变量。

Because you doing it wrong. 因为你做错了。

Here '<h3>'+$scope.contor+'</h3>' you get string '<h3>0</h3>' as you can see this string not depends on any variables. 这里'<h3>'+$scope.contor+'</h3>'你得到字符串'<h3>0</h3>'因为你可以看到这个字符串不依赖于任何变量。

So, you should change it to 所以，你应该把它改成

'<h3>{{contor}}</h3>'

and better not use compile service inside controller, and just change html to 最好不要在控制器内部使用编译服务，只需将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>

Answer 2

in your controller you did not call $scope.init(). 在您的控制器中，您没有调用$ scope.init（）。 That's why this is not work. 这就是为什么这不起作用。

Use var generated = element.html('<h3>'+contor+'</h3>'); 使用var generated = element.html('<h3>'+contor+'</h3>');
Instead var generated = element.html('<h3>'+$scope.contor+'</h3>'); 相反， var generated = element.html('<h3>'+$scope.contor+'</h3>');

I took reference Running AngularJS initialization code when view is loaded 我在加载视图时参考了运行AngularJS初始化代码

使用AngularJS中的动态元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-01-01 12:00:02

解决方案2
1 2016-01-01 11:42:08

使用AngularJS中的动态元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-01-01 12:00:02

解决方案2 1 2016-01-01 11:42:08

解决方案1
2 已采纳 2016-01-01 12:00:02

解决方案2
1 2016-01-01 11:42:08