클릭이 작동하지 않는 이유는 무엇입니까?

왜이 간단한 클릭 예제가 작동하지 않을까요? 나는 제작 과정에서 몇 달 동안 각도를 사용하고 있었지만이 덩어리가 나를 당황하게하고있다.클릭이 작동하지 않는 이유는 무엇입니까?

당신이 알 경우, NG 쇼 특성을 노력하고 있습니다 ... 왜 클릭하지? 그것은 항상 각도 클릭이 아닌 기본값을 경고합니다.

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div> 
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>

격리 된 범위가 없으며 지시문이 없습니다 ... 단지 div뿐입니다. onclick을 제거 할 수 있습니다 .... 다른 경고는 절대 발생하지 않습니다. 문제가 무엇이든간에 나는 그것을 발견하기에는 너무 근시가되어 버렸다.

지루한 설정의 나머지 :

angular.module('plunker', []); 

var app = angular.module('plunker', [ 
    'plunker' 
]); 



app.config(function() { 
     'use strict'; 
}); 



app.controller('MainCtrl', function($scope) { 
    var that = this; 

    $scope.showTest = true; 

});

전체 HTML :

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.6/angular.js" data-semver="1.2.25"></script> 

    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl as vm"> 

<br/><br/> 

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div> 
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div> 


</html>

출처

2014-12-17 FlavorScape

관련된 모든 코드는 **에 포함 ** 문제는 단지 연결되지 않았습니다. 링크 썩어, 사람들이 당신을 돕기 위해 오프 사이트로 이동해서는 안됩니다. 웹용의 경우 스택 스 니펫을 사용하여 실행중인 것을 정확하게 보여줄 수 있습니다. –

당신이 내 빈 각도 설정을보고 싶지 않다면 그것은 거의 모든 코드입니다. 지금 추가하고 있습니다. – FlavorScape

네, 바로 그 요점입니다. 그러나 다시 : Stack Snippet을 사용하는 이유는 무엇입니까? 말하지 마라 * 쇼 *. –

Angular의 표현식은 함수를 사용하지 않으므로 범위 체인에 alert이라는 함수를 정의하지 않으면 실행되지 않습니다.

https://docs.angularjs.org/guide/expression#context

각도

는 식을 평가하기 위해 자바 스크립트의 평가()를 사용하지 않습니다. 대신 Angular의 $ parse 서비스가이 표현식을 처리합니다.

각도 표현식은 창, 문서 또는 위치와 같은 전역 변수에 액세스 할 수 없습니다. 이 제한은 의도적 인 것입니다. 은 글로벌 상태에 대한 우연한 액세스를 방지합니다. 이는 흔한 소스 인 미묘한 버그입니다.

대신 표현식에서 이라는 함수에서 $ window 및 $ location 같은 서비스를 사용하십시오. 이러한 서비스는 전역에 대한 조롱 가능한 액세스를 제공합니다.

그래서 당신은 당신의 범위에 이러한 함수를 정의해야합니다 :

app.controller('MainCtrl', function($scope,$window) { 
    var that = this; 

    $scope.showTest = true; 
    $scope.alert = function() { 
    $window.alert('angular click'); 
    }; 
});

DEMO

angular.module('plunker', []); 
 

 
var app = angular.module('plunker', [ 
 
    'plunker' 
 
]); 
 

 
app.config(function() { 
 
     'use strict'; 
 
}); 
 

 
app.controller('MainCtrl', function($scope,$window) { 
 
    var that = this; 
 

 
    $scope.showTest = true; 
 
    $scope.alert = function(text){ 
 
    $window.alert(text); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div> 
 
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div> 
 
</div>

출처

2014-12-17 23:17:14

추가 컨트롤러 정의에 alert 속성 :

app.controller('MainCtrl', function($scope) { 
    var that = this; 

    $scope.showTest = true; 

    $scope.alert = function(msg) { 
    alert(msg); 
    }; 
});

나는 문제가 생각 ng-click 지시문은 자동으로 당신은 컨트롤러 객체의 범위 안에 넣습니다. 컨트롤러에 alert 속성이 없으면 아무 일도 일어나지 않습니다.

출처

2014-12-17 23:15:23 rchang

아, 이런, 그런 느낌이 들었습니다. 이 어리석은 시험을 수행하는 유일한 이유는 사용자 정의 요소 (웹 위젯)를 추구하기 때문에 나는 이미 좌절하고있었습니다 ... – FlavorScape

@FlavorScape 나는 아침과 오후를 잃은 횟수를 잃어 버렸습니다. "기본 무언가". 희망적으로 이것이 도움이 되겠습니까? – rchang

클릭이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제