Tại sao ng-click không hoạt động trong trường hợp-1, nhưng trong trường hợp-3?

Question

Rõ ràng là có điều gì đó cơ bản chưa được hiểu rõ.

Im cố gắng để làm cho người sử dụng của các mô-đun Modal trong góc Ui.Bootstrap nhưng phát hiện im đó nhấp chuột của tôi không được kích hoạt open() chức năng - Vì vậy, sôi nó xuống một testcase rất đơn giản, như dưới đây, im không nhìn thấy bất kỳ cuộc gọi khi ng-click trỏ tới một hàm (alert hoặc console.log), nhưng nó hoạt động khi điểm ng-click trỏ đến một cái gì đó chỉ là một biểu thức

Tại sao là alert không được gọi trong ví dụ đầu tiên?

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

Answer 1

ng-click là có nghĩa là để sử dụng với một trong hai chức năng trong phạm vi hiện tại (ví dụ như vậy $scope.alert = window.alert sẽ giải quyết vấn đề không thể để cảnh báo có) hoặc một biểu thức góc. nó trông giống như góc không cho phép bạn sử dụng phương pháp phạm vi toàn cầu trong đó (nó có thể tìm kiếm chúng trong dòng $scope, từ đó họ đang thiếu).

Answer 2

Cho rằng để làm việc, bạn phải xác định alert trên $scope của bạn:

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

mảnh có liên quan từ tài liệu:

AngularJS hạn chế truy cập vào các đối tượng Window từ bên trong biểu vì nó là một cách đã biết để thực thi mã Javascript tùy ý.

https://docs.angularjs.org/error/ $ phân tích cú pháp/isecwindow

Answer 3

Bạn không thể thực hiện rằng loại mã trong ng chỉ thị. Họ tìm kiếm nội dung trong phạm vi địa phương của bạn.

Nếu bạn làm điều này trong điều khiển của bạn:

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

và sau đó trong mẫu của bạn

ng-click="alert()" 

Nó sẽ thực hiện javascript cảnh báo đúng.

Answer 4

ng-click hy vọng một angular expression. Bên trong, góc được sử dụng dịch vụ $parse để đánh giá expression trong ng-click="expression".

Một biểu góc là không giống như mã javascript thông thường. $parse sử dụng chuỗi phân tích cú pháp để giải thích sự biểu hiện và nó hạn chế truy cập của bạn để biến, chức năng, và các đối tượng để chỉ những người mà là tài sản của đối tượng $scope, hoặc tài sản của bất kỳ đối tượng $parent phạm vi đó xảy ra sẽ có sẵn tiếp tục lên prototypical inheritance chain.

Vì vậy, về mặt lý thuyết bạn có thể truy cập vào globals như thế này:

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

...và sau đó trong mẫu của bạn làm ng-click="window.alert('hello!')"

... hoặc ... ng-click="alert('hello!')"

---

Hoặc bạn có thể làm điều này chỉ một lần:

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

Sau đó, bất kỳ phạm vi mà nguyên mẫu được thừa hưởng từ $rootScope sẽ cũng có quyền truy cập vào cửa sổ và cảnh báo.

---

... nhưng có những lý do chính đáng không bao giờ thực hiện một trong hai cách trên, ngoại trừ có thể vì mục đích gỡ lỗi. Đó không phải là để nói rằng trang trí $rootScope luôn luôn là một ý tưởng tồi, có ít nhất one special case where decorating angular's scope can accomplish something that would be very difficult to do otherwise.

Answer 5

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>