Почему ng-click не работает в case-1, но в случае-3?

Есть явно что-то фундаментальное, я еще не понимаю.

Я пытаюсь сделать пользователя модуля Modal в Angular Ui.Bootstrap, но я обнаружил, что мои клики не активируют функцию open() - так что кипятите ее до очень простой тестовой системы, как показано ниже: im not видя любые вызовы, когда 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/

Ответы

Ответ 1

ng-click предназначен для использования либо с функцией в текущей области действия (поэтому, например, $scope.alert = window.alert разрешит проблему отсутствия возможности оповещения) или выражение angular. похоже, что angular не позволяет вам использовать глобальные методы измерения там (это может выглядеть в текущем $scope, из которого они отсутствуют).

Ответ 2

ng-click ожидает angular выражение. Внутри angular использует службу $parse для оценки expression в ng-click="expression".

Выражение angular не совпадает с обычным кодом 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, также будет иметь доступ к окну и оповещению.

... но есть веские причины никогда не делать ничего из вышеизложенного, кроме, возможно, для целей отладки. Чтобы не сказать, что украшение $rootScope всегда плохая идея, существует, по крайней мере, один частный случай, когда декорирование области angular может выполнить что-то, что будет очень трудно сделать иначе.

Ответ 3

Вы не можете выполнить такой код в ng-директивах. Они ищут контент в локальной области.

Если вы сделаете это в своем контроллере:

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

а затем в вашем шаблоне

ng-click="alert()"

Он правильно выполнит предупреждение javascript.

Ответ 4

Для этого вам нужно определить alert на $scope:

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

Соответствующая деталь из документации:

AngularJS ограничивает доступ к объекту Window изнутри выражения, так как это известный способ выполнения произвольного Javascript код.

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

Ответ 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>