web-dev-qa-db-ja.com

Angular ng-clickがdivで機能しない

OK、私はしばらくここで立ち往生している、と私はそれが比較的愚かな何かだと確信しています

http://plnkr.co/edit/YcBnbE5VCU5rizkDWreS?p=preview

<head>
    <link href="http://Twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://Twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {
            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
              ];
            $scope.OpenCourse = function(courseId) {
                $window.alert("Called " + courseId);
            }
        }
    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses" ng-click="vm.OpenCourse(course.Id)">
            <div>
                <div>
                    <label>{{course.Name}}</label>
                </div>
            </div>
        </div>
    </div>
</body>

ここでng-clickが起動しないのはなぜですか？この質問はよく聞かれるようですが、どの答えも役に立たないようです。また、divを繰り返しの外に移動すると動作するように見えますが、繰り返しますが、理由はわかりません。

ありがとう

angularjsangularjs-ng-click
18
Carlos Rodriguez

vm.を削除します

結果：

<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">

なぜですか？$scopeに設定したすべてがパーシャルで利用可能になるので、それを呼び出すだけです。

20
Felipe Pereira

OpenCourse（course.Id）の前に "vm"がないことは、実際にプランカーを作成するときの誤植でした。私は答えを正しいとマークしました。それはプランカーを機能させたのですが、私の問題はこれではありませんでした。 z-indexを変更し、そのdivを他のdivの背後に配置し、クリックが伝達されないようにする外部divに割り当てられたクラスがあることが判明しました。

7
Carlos Rodriguez

<label>を使用すると、クリックすると奇妙な動作が発生する場合があります。可能であれば別のものに変更してみて、コードを再テストしてください。

2
lokers

次のように変更します。

ng-click="OpenCourse(course.Id)"

ワーキングプランカー

0
ltalhouarne