it-swarm.com.ru

NG-щелчок не работает внутри NG-повтора

Ng-click не работает изнутри ng-repeat. Снаружи это работает . Я положил скрипка здесь

<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>
26
Alexandru Rada

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

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

Быстрое и грязное решение состоит в том, чтобы получить доступ к родительской области, используя $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, используя лучший метод

51
James Lawruk

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

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

Правка: кажется, этот ответ очень спорный. Просто чтобы прояснить - так работает 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
14
Ven

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

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

6
Iain Collins

Здесь мы можем использовать $ 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>

Угловой код Js 

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/

3
Harpreet Singh

Это работает 

<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>
1
Uday Gowda

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

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

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

Так 

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

0
Rohan Hussain

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

<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, и он начал работать, я пока не нашел причину, просто быстро опубликовал, чтобы поделиться.

0
Hitesh Joshi

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

Проверьте документацию на 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>

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

0
Gerrard8