Ng-клік не працуе ў НГ-паўтор

Ng-click doesn't work from inside ng-repeat. Outside it works. I've put a fiddle here

<div ng-controller="MyCtrl">
 test
    
Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}
       
</div>
25

8 адказы

Як Вен згадвалася, НГ-паўтору сапраўды стварае даччыную вобласць для кожнага элемента ў пятлі. Дзіця прыцэлы маюць доступ да пераменным і метадам бацькоўскай вобласці праз прототипное спадчыну. Заблытаная частка, калі вы робіце прызначэнне, ён дадае новую пераменны да дзіцяці сферу, а не абнаўленне уласнасці на бацькоўскай вобласці. У НГ націсніце , калі вы робіце выклік прысвойвання tiggerTitle = e.name , ён фактычна дадае новую зменную з імем triggerTitle для дзіцяці сферы , У AngularJS дакументы тлумачыць гэта добра ў раздзеле тут называецца JavaScript прататып ўспадкоўванне .

So how do you get around this and set the model variable properly?

Хуткі і брудны раствор для доступу да бацькоўскай вобласці, выкарыстоўваючы $ бацькоўскай як так.

...

Click to see a working version of your Fiddle using the $parent solution.

Выкарыстанне $ бацькоўскага можа выклікаць праблемы, калі вы маеце справу з укладзенымі шаблонамі або укладзенымі НГ-паўторамі. Лепшае рашэнне можа быць дадаць функцыю да вобласці кантролера, які вяртае спасылку на сферу кантролера. Як ужо згадвалася, даччыныя прыцэлы маюць доступ для выкліку бацькоўскіх функцый, і, такім чынам, могуць спасылацца на сферу кантролера.

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

Click to see a working version of your Fiddle using the better method

51
дададзена
Падумайце лепшым рашэннем будзе «controllerAs»
дададзена аўтар Lyubimov Roman, крыніца
Павінен быць адзначаны як правільны адказ. Але тлумачэнне павінна быць спрошчана да 3-х ліній агульных. НГ-паўтор стварае новую вобласць. калі вы спрабуеце атрымаць доступ да $ сферы з НГ-паўтору на НГ кнопкай мышы, вы павінны выкарыстоўваць $ з бацькоў на гэтым элеменце. дзякуй за кірунак, хоць
дададзена аўтар Linial, крыніца

Паколькі НГ-паўтор стварае новую вобласць.

This has been answered numerous time, because the nuance is a bit difficult to understand, especially if you don't know everything about js's prototypal inheritance : https://github.com/angular/angular.js/wiki/Understanding-Scopes

EDIT: здаецца, гэты адказ вельмі спрэчна. Проста каб быць ясна, - гэта тое, як працуе JS. Вы сапраўды не павінны спрабаваць даведацца Кутняе, перш чым зразумець, як працуе 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
дададзена
Downvoted для не да вырашэння праблемы НГ націсніце не працуе ў НГ-паўтору.
дададзена аўтар Sarah Vessels, крыніца
Я разумею, спрабуючы знайсці працоўныя прыклады AngularJS онлайн быў адзін з самых складаных задач праграмавання, якія я меў. Гэтая структура з'яўляецца выдатным, але гэта загадка, а яго дакументацыя пакідае жадаць лепшага.
дададзена аўтар Sarah Vessels, крыніца
Добры выпадак дадатковых Ускосна вырашэння ўсіх праблем. +1
дададзена аўтар rightfold, крыніца
Адказ на гэтае пытанне крыху больш, чым «RTFM». Апраўданне, што ОП «павінен зразумець гэта» не рэзаць.
дададзена аўтар Tony Ennis, крыніца
Трохі спазніліся на вечарыну, але гэта сапраўды павінна быць знесена. Вы маглі б спалучалі прыклад JS ў рамках з дапамогай прыкладаемага вырашэння праблемы NG-Click/Repeater. Гэта быў бы выдатны пост.
дададзена аўтар snowYetis, крыніца
Задаваць пытанні замест таго, каб проста сказаць «БАХ DOWNVOTED ВАШ АДКАЗ адстой», як правіла, лепш;). Зараз, каб спыніць з жартую, я не падаў фіксаваны код, таму што гэта тое, што <�я> патрэбы варта разумець аўтара. Гэта вельмі важна пры працы з кутнім, і калі вы не ведаеце, што правілы на памяць, вы будзеце марнаваць вашы пытанні адладкі часу, якія ўзнікаюць з не выкарыстоўваючы кропку.
дададзена аўтар Ven, крыніца
Акрамя таго, я згодны, што дакументацыя не вельмі апісальная часам, але ёсць шмат прыкладаў вакол там і вельмі актыўны супольнасць.
дададзена аўтар Ven, крыніца
На жаль, так яно і ёсць. Калі вы не гатовыя навучання частцы мовы вы выкарыстоўваеце, вы ў бядзе ў любым выпадку.
дададзена аўтар Ven, крыніца
@IainCollins Я не разумею, пра што вы кажаце.
дададзена аўтар Ven, крыніца
Я ўпэўнены, што вы можаце атрымаць, што змена імя пераменнага усюды (або імя ўласцівасці) не зменіш паводзіны :-).
дададзена аўтар Ven, крыніца
Гэта на самай справе не дае адказу на простае і цалкам слушнае пытанне, і вельмі ўводзіць у зман. Аб'ём у AngularJS працуе такім чынам, па дызайне, але ён мог бы гэтак жа, як у роўнай ступені няма.
дададзена аўтар Iain Collins, крыніца
+1 за вялікую спасылку
дададзена аўтар jupiter, крыніца

Замест гэтага:

  • {{e.action}} {{e.name}}
  •  
    

    Проста зрабіце гэта:

  • {{e.action}} {{e.name}}
  •  
    

    ng-repeat creates a new scope, you can use $parent to access the parent scope from inside the ng-repeat block.

    6
    дададзена

    Тут мы можам выкарыстоўваць $ з бацькоў, так што мы можам атрымаць доступ да кода па-за НГ-паўтору.

    код Html

    <div ng-controller="MyCtrl">
            test
    
    
            
    Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}


    
    

    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'}]
    

    }

    you can test it here http://jsfiddle.net/xVZEX/96/

    3
    дададзена

    Выкарыстанне кантролераў з «як» ключавым словам.

    Праверце ў дакументацыі на angularjs на кантролерах.

    Для прыведзенага вышэй пытання:

    <div ng-controller="MyCtrl as myCntrl">
     test
        
    Please select trigger event: [{{myCntrl.triggerEvent}}] {{myCntrl.triggerTitle}}
           
    </div>
    

    Гэта будзе надаваць ўласцівасці і функцыі ў рамках кантролера.

    1
    дададзена

    гэта працуе

    <body ng-app="demo" ng-controller="MainCtrl">
     
    • {{action.name}}
     <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
    дададзена
    Апішыце, калі ласка, свой адказ, замест таго, каб проста ўставіць блок кода. Гэта павінна дапамагчы камусьці зразумець, што (калі) яны зрабілі няправільна або прапалі без вестак.
    дададзена аўтар Sjon, крыніца

    выкарыстоўваць гэта

    <div ng:controller="MyCtrl">
     test
        
    Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}
           
    </div>
    

    Я пераўтвораныя НГ пстрыкніце на НГ: націсніце і пачатак працаваць, я да гэтага часу знайсці прычыну, толькі хутка адправілі падзяліцца.

    0
    дададзена

    Я перамяшчаўся ў Інтэрнэце так доўга шукалі адказ на праблему НГ-паўтор стварае сваю сферу ўнутры яго. Пры змене зменнай ўнутры НГ-паўтору, меркавання не абнаўляюцца ўсюды ў дакуменце.

    І, нарэшце, рашэнне, якое я знайшоў адно слова, і ніхто не кажа вам пра гэта.

    Гэта $ бацька. перад імем зменнай, і гэта зменіць сваё значэнне ў глабальным маштабе.

    так

    ng-click="entryID=1"
    becomes
    ng-click="$parent.entryID=1"

    0
    дададзена