AngularJS $ scopeの使い方は？

私は段落とカウンターを持っています。誰かが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-appとng-controllerを正しく使用してください。 jqueryを角度と組み合わせて使用しないでください。 $ 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>

出典

2016-12-07 08:11:02

なぜあなたはここで時計が必要ですか？ – sisyphus

@sisyphusあなたは本当にそれを必要としません。デモンストレーションの目的でのみ、イベントハンドラの外で**状態**の変更を観察する方法を著者に示すことです。 –

あなたは「jQueryを使用しないでください」と言っていますが、それをリソースとして読み込みますか？どうして？ – lin

Don't mix angular with jQuery!

はむしろちょうど体にng-app & ng-controllerディレクティブを移動することで、角度コンテキスト内のすべてのもの、それをやっての角道、ラップを追跡し、持っているし、その後pタグにng-clickを置き、そこ

をご希望の作業を行います

マークアップ

<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 Lol、それは素晴らしい言葉です* 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

さて、あなたはそれを修正しました。祝福。 – lin

ありがとうございます。私の悪い：） – PhuLuong

AngularJS $ scopeの使い方は？

答えて

関連する問題