Question

我尝试使用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（）不再更改计数器的变量。

Answer 1

为什么当加载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>

Answer 2

在您的控制器中，您没有调用$ scope.init（）。这就是为什么这不起作用。

使用var generated = element.html('<h3>'+contor+'</h3>');
而是var generated = element.html('<h3>'+$scope.contor+'</h3>');

我参考了Running AngularJS initialization code when view is loaded

使用AngularJS中的动态元素

2 个答案: