Ng-click не работает внутри ng-repeat

Как упоминал Вен, ng-repeat создает дочернюю область для каждого элемента в цикле. Дочерние области имеют доступ к переменным и методам родительской области через прототипное наследование. Запутанная часть заключается в том, что когда вы выполняете назначение, оно добавляет новую переменную в дочернюю область, а не обновляет свойство в родительской области. В ng-click, когда вы делаете вызов присваивания tiggerTitle =e.name, он фактически добавляет новую переменную с именем triggerTitle в дочернюю область. Документация по AngularJS хорошо объясняет это в разделе здесь под названием JavaScript Prototypal. Наследование.

Как же обойти это и правильно установить переменную модели?

Быстрое и грязное решение - получить доступ к родительской области, используя $parent вот так.

<a ng:click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">...

Нажмите, чтобы просмотреть рабочую версию Fiddle, использующую решение $parent.

Использование $parent может вызвать проблемы, если вы имеете дело с вложенными шаблонами или вложенными повторами ng. Лучшим решением может быть добавление функции в область действия контроллера, которая возвращает ссылку на область действия контроллера. Как уже упоминалось, дочерние области имеют доступ для вызова родительских функций и, таким образом, могут ссылаться на область действия контроллера.

function MyCtrl($scope) {
    $scope.getMyCtrlScope = function() {
         return $scope;   
    }
 ...

<a ng-click="getMyCtrlScope().triggerTitle=e.name;getMyCtrlScope().triggerEvent = ...

Нажмите, чтобы увидеть рабочую версию Fiddle с использованием лучшего метода

Потому что ng-repeat создает новую область.

На этот вопрос отвечали много раз, потому что нюанс немного сложно понять, особенно если вы не знаете всего о прототипном наследовании js: https://github.com/angular/angular.js/wiki/Understanding-Scopes

РЕДАКТИРОВАТЬ: кажется, этот ответ очень спорный. Просто для ясности — так работает JS. Вы действительно не должны пытаться изучать Angular, пока не поймете, как работает JS. Тем не менее, ссылка, кажется, отсутствует

Итак, вот пример того, как JS работает в этом случае:

var a = {value: 5};
var b = Object.create(a); // create an object that has `a` as its prototype

// we can access `value` through JS' the prototype chain
alert(b.value); // prints 5
// however, we can't *change* that value, because assignment is always on the designated object
b.value = 10;
alert(b.value); // this will print 10...
alert(a.value); // ... but this will print 5!

Итак, как мы можем обойти это?

Что ж, мы можем «заставить» себя пройти через цепочку наследования — и таким образом мы будем уверены, что всегда обращаемся к правильному объекту, будь то доступ к значению или его изменение.

var a = {obj: {value: 5}};
var b = Object.create(a); // create an object that has `a` as its prototype

// we can access `value` through JS' the prototype chain:
alert(b.obj.value); // prints 5
// and if we need to change it,
// we'll just go through the prototype chain again:
b.obj.value = 10;
// and actually refer to the same object!

alert(b.obj.value == a.obj.value); // this will print true

Вместо этого:

<li ng-repeat="e in events">
  <a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} {{e.name}}</a>
</li>

Просто сделайте это:

<li ng-repeat="e in events">
  <a ng-click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">{{e.action}} {{e.name}}</a>
</li>

ng-repeat создает новую область, вы можете использовать $parent для доступа к родительской области внутри блока ng-repeat.

Здесь мы можем использовать $parent, чтобы иметь доступ к коду за пределами ng-repeat.

HTML-код

<div ng-controller="MyCtrl">
        <a ng-click="triggerTitle='This works!'">test</a>


        <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
<br /> <br />
          <ul class="dropdown-menu">
            <li ng-repeat="e in events">
                <a ng-click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
            </li>
          </ul>

Angular Js code

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

function MyCtrl($scope) {
$scope.triggerTitle = 'Select Event';
$scope.triggerEvent = 'x';
$scope.triggerPeriod = 'Select Period';
$scope.events =  [{action:'compare', name:'Makes a policy comparison'}, {action:'purchase', name:'Makes a purchase'},{action:'addToCart', name:'Added a product to the cart'}]

}

вы можете протестировать его здесь http://jsfiddle.net/xVZEX/96/

Это работает

<body ng-app="demo" ng-controller="MainCtrl">
 <ul>
    <li ng-repeat="action in actions" ng-click="action.action()">{{action.name}}</li>
 </ul>

 <script>
  angular.module('demo', ['ngRoute']);

  var demo = angular.module('demo').controller('MainCtrl', function ($scope) {
  $scope.actions = [
    { action: function () {
        $scope.testabc();
      }, name: 'foo'
    },
    { action: function () {
        $scope.testxyz();
      }, name: 'bar'
    }
  ];

  $scope.testabc = function(){
    alert("ABC");
  };

  $scope.testxyz = function(){
    alert("XYZ");
  };

 });
</script>
</body>

Я так долго бродил по Интернету в поисках ответа на проблему ng-repeat, создающего в нем свою область видимости. Когда вы изменяете переменную внутри ng-repeat, представления не обновляются где-либо еще в документе.

И, наконец, решение, которое я нашел, было одним словом, и никто вам этого не сказал.

Это $родитель. перед именем переменной, и она изменит свое значение в глобальной области видимости.

So

ng-click="entryID=1"
становится
ng-click="$parent.entryID=1"

использовать это

<div ng:controller="MyCtrl">
 <a ng:click="triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng:repeat="e in events">
             <a ng:click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} -     {{e.name}}</a>
         </li>
       </ul>
</div>

Я преобразовал ng-click в ng:click, и он начал работать, я еще не нашел причину, просто быстро опубликовал, чтобы поделиться.

Используйте контроллеры с ключевым словом as.

Ознакомьтесь с документацией по angularjs на контроллерах.

По вышеуказанному вопросу:

<div ng-controller="MyCtrl as myCntrl">
 <a ng-click="myCntrl.triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{myCntrl.triggerEvent}}] {{myCntrl.triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng-repeat="e in myCntrl.events">
             <a ng-click="myCntrl.triggerTitle=e.name; myCntrl.triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
         </li>
       </ul>
</div>

Это прикрепит свойства и функции к области действия контроллера.