如何使用 AngularJS $scope？

Question

我有一个段落和一个计数器。当有人使用 AngularJS 单击该段落时，我想更新计数器。我写了以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<p>Click on this paragraph.</p>

<div ng-app="myApp" ng-controller="myCtrl">

<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $ang=$scope;
    $ang.count=10;
});
$(document).ready(function(){
    $("p").click(function(){
        console.log("The paragraph was clicked.");
        $ang.count=$ang.count-1;
    });
});
</script> 
</body>
</html>

但是它不起作用。我想我使用

$scope

的方式是错误的，但我不知道如何修复它。

Answer 1

不要将 Angular 与 jQuery 混合！

而是遵循 Angular 的做法，只需在主体上移动

ng-app

和

ng-controller

指令，然后将

ng-click

放在

标签上，然后在那里执行您想要的任务，即可将所有事物包裹在角度上下文中

标记

<body ng-app="myApp" ng-controller="myCtrl">
   <p ng-click="incrementCount()">Click on this paragraph.</p>
   <div>
       <h2>{{ count }}</h2>
   </div>
<body>

代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 10;
    $scope.incrementCount = function(){
      $scope.count = $scope.count + 1;
    }
});

演示插件

Answer 2

应该是：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>   

<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 10;
    $scope.click = function(){
         $scope.count=$scope.count-1;
    }
});
</script> 
</body>
</html>

Answer 3

您的代码中有几个错误。我对其进行了一些重构。确保正确使用 ng-app 和 ng-controller。不要将 jquery 与 Angular 结合使用。您可以使用 $watch 函数观察范围变化 - 这种方法的计算成本很高，不应该过度使用。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<div ng-controller="myCtrl">
    <p ng-click="onClick()">Click on this paragraph.</p>

    <h2>{{ count }}</h2>
</div>

</div>
<script>


angular
    .module('myApp', ['ng'])

    .controller('myCtrl', function($scope) {
        $scope.count = 10
        $scope.onClick = function () {
            $scope.count--
        }

        // this is how you can observe state
        // changes outside of event handlers
        $scope.$watch('count', function(newValue, oldValue) {
            console.log("The paragraph was clicked.")
        })
    })
</script>
</body>
</html>

如何使用 AngularJS $scope？

问题描述投票：0回答：3

3个回答

最新问题

如何使用 AngularJS $scope？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3