programing

케이스 1에서는 ng-click이 동작하지 않지만 케이스 3에서는 동작하는 이유는 무엇입니까?

codeshow 2023. 3. 23. 22:58
반응형

케이스 1에서는 ng-click이 동작하지 않지만 케이스 3에서는 동작하는 이유는 무엇입니까?

내가 아직 이해하지 못하는 근본적인 무언가가 분명히 있다.

Angular Ui에서 Modal 모듈을 사용자로 만들려고 합니다.부트스트랩이지만 클릭해도 활성화되지 않습니다.open()function -- 따라서 다음과 같이 매우 간단한 테스트 케이스로 요약합니다.ng-click이 함수(alert 또는 console.log)를 가리킬 때는 콜이 표시되지 않지만 ng-click이 단순히 표현식인 무언가를 가리킬 때는 동작합니다.

왜?alert첫 번째 예에서는 호출되지 않았습니까?

<div data-ng-app>
    <button data-ng-click="alert('Message 1');">
        ngClick -- not working, why not?
    </button>
    <button onclick="alert('Message 2');">
        Plain onclick
    </button>
    <button data-ng-click="count = (count + 1)">
          But this works, why ???
    </button>
    count: {{count}}
</div>

http://jsfiddle.net/H2wft/1/

ng-click는 현재 스코프의 함수 중 하나와 함께 사용하도록 의도되어 있습니다(예:$scope.alert = window.alert경고할 수 없는 문제를 해결할 수 있습니다.) 또는 각진 표현.angular에서는 글로벌스코프 메서드를 사용할 수 없는 것 같습니다(현재 검색 중일 수 있습니다).$scope(이것에는 없습니다).

ng-click각진 표정을 예상합니다.내부적으로는 angular가 다음을 사용하고 있습니다.$parse서비스 평가expressionng-click="expression".

각도 표현식은 일반 Javascript 코드와 다릅니다. $parse문자열 해석을 사용하여 식을 해석하고 변수, 함수 및 객체에 대한 접근을 의 속성인 것만으로 제한합니다.$scope오브젝트 또는 속성$parent프로토타입 상속 체인에서 사용할 수 있는 객체 범위를 지정합니다.

그래서 이론상으로는 다음과 같은 지구촌에 접근할 수 있다.

 $scope.window = window;
 $scope.alert = alert;

...템플릿에서 다음 작업을 수행합니다.ng-click="window.alert('hello!')"

...혹은... ng-click="alert('hello!')"


또는 한 번만 이 작업을 수행할 수 있습니다.

 $rootScope.window = window;
 $rootScope.alert = alert;

그리고 프로토타입으로 상속받은 스코프$rootScope또한 창과 경고에 액세스할 수 있습니다.


... 단, 디버깅을 목적으로 하는 경우를 제외하고 위의 어느 것도 실행하지 않는 타당한 이유가 있습니다.그렇다고 해서 이 모든 걸 꾸미는 게$rootScopeangular의 스코프를 장식하는 것은 항상 나쁜 생각입니다.그 이외의 방법으로 하기에는 매우 어려운 것을 달성할 수 있는 특별한 경우가 적어도가지 있습니다.

ng 디렉티브에서는 그런 종류의 코드를 실행할 수 없습니다.로컬 범위에서 콘텐츠를 찾습니다.

컨트롤러에서 이 작업을 수행할 경우:

$scope.alert = function(){
  alert('alerted!');
};

그리고 템플릿에

ng-click="alert()"

javascript 경고가 올바르게 실행됩니다.

「이행」을 정의할 필요가 있습니다.alert$scope:

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

문서의 관련 부분:

AngularJS는 임의의 Javascript 코드를 실행하는 알려진 방법이기 때문에 식 내에서 Window 개체에 대한 액세스를 제한합니다.

https://docs.angularjs.org/error/$parse/isecwindow

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

 <div class="example2" ng-controller="ExampleController">
  Name: <input ng-model="name" type="text"/>
  <button ng-click="greet()">Greet</button>
  <button ng-click="window.alert('Should not see me')">Won't greet</button>
</div>

언급URL : https://stackoverflow.com/questions/23725312/why-does-ng-click-not-work-in-case-1-but-does-in-case-3

반응형