如何使用AngularJS $作用域？

我有一个段落和一个计数器。当用户点击使用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，但我不知道如何解决它。

来源

2016-12-07 Shafaet

为什么你在角度应用程序外面保留了'p'？你的要求是什么？ – Satpal

-1

您在代码中有几个错误。我重构了一下。确保使用NG-应用和NG控制器正常。不要在组合使用jQuery的与角。你可以观察与$看功能范围的变化 - 这种方法在计算方面是昂贵的，不应该被过度使用。

<!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>

来源

2016-12-07 08:11:02

为什么你需要一个手表在这里？ – sisyphus

@sisyphus你并不需要它。它仅用于演示目的 - 向作者展示如何在事件处理程序之外观察** state **更改。 –

你说“不要使用jQuery”，但你加载它作为资源？为什么？ – lin

Don't mix angular with jQuery!

而是跟着做这件事的角度来说，裹在角范围内的所有事情只是通过在身体移动ng-app & ng-controller指令，并拥有然后将ng-click上p标签，做你所需的任务有

标记

<body ng-app="myApp" ng-controller="myCtrl"> 
    <p ng-click="increamentCount()">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.increamentCount = function(){ 
     $scope.count = $scope.count + 1; 
    } 
});

Demo Plunker

来源

2016-12-07 08:06:37

为什么不，它叫做jAngQuelarry。它就像土壤与空气混合并饮用它。 – lin

@lin大声笑，这是伟大的词* jAngQuelarry *，你为什么这样想呢？ –

=）我'只是无聊所有的jQuery的新手谁不知道怎么的角度以正确的方式是用来做的。他们都试图将jQuery与角度混合。 - > jAngQuelarry。 – lin

它应该是：

<!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>

来源

2016-12-07 08:08:41 PhuLuong

嗯，你修好了。 Gratulations。 – lin

谢谢。我的坏：） – PhuLuong

如何使用AngularJS $作用域？

回答

相关问题