angularjs - एनजी-क्लिक एनजी-दोहराना के अंदर काम नहीं करता है




angularjs-ng-repeat angularjs-ng-click (6)

'As' कीवर्ड के साथ नियंत्रकों का उपयोग करें।

नियंत्रकों पर angularjs पर documentation जांच करें।

उपर्युक्त प्रश्न के लिए:

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

यह गुणक के दायरे में गुणों और कार्यों को संलग्न करेगा।

एनजी-क्लिक अंदर एनजी-दोहराना से काम नहीं करता है। इसके बाहर काम करता है। मैंने यहाँ एक पहेली डाली है

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

इसके अलावा:

<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 एक नया दायरा बनाता है, आप ng-repeat block के अंदर से मूल दायरे तक पहुंचने के लिए $parent का उपयोग कर सकते हैं।


क्योंकि ng-repeat एक नया दायरा बनाता है।

इसका उत्तर कई बार दिया गया है, क्योंकि बारीकियों को समझना थोड़ा मुश्किल है, खासकर यदि आप जेएस के प्रोटोटाइप विरासत के बारे में सबकुछ नहीं जानते हैं: https://github.com/angular/angular.js/wiki/Understanding-Scopes

संपादित करें: ऐसा लगता है कि यह उत्तर बहुत विवादास्पद है। बस स्पष्ट होना - इस तरह जेएस काम करता है। जेएस कैसे काम करता है समझने से पहले आपको वास्तव में कोणीय सीखने की कोशिश नहीं करनी चाहिए। हालांकि, लिंक याद आती है

तो, इस मामले में जेएस कैसे काम करता है इस पर एक उदाहरण दिया गया है:

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

जैसा कि वेन ने उल्लेख किया है, ng-repeat लूप में प्रत्येक आइटम के लिए एक बाल दायरा बनाता है। बच्चे के क्षेत्रों में प्रोटोटाइप विरासत के माध्यम से अभिभावक के दायरे के चर और विधियों तक पहुंच होती है। भ्रमित करने वाला हिस्सा तब होता है जब आप असाइनमेंट करते हैं, यह मूल दायरे पर संपत्ति को अपडेट करने के बजाय बच्चे के दायरे में एक नया चर जोड़ता है। ng-click , जब आप एक असाइनमेंट कॉल करते हैं तो tiggerTitle =e.name , यह वास्तव में triggerTitle नामक एक नया चर जोड़ता है जिसे बच्चे के दायरे में triggerTitle जाता है। एंगुलरजेएस डॉक्स जावास्क्रिप्ट प्रोटोटाइप विरासत नामक अनुभाग में इस कुएं को बताते हैं।

तो आप इस के आसपास कैसे जाते हैं और मॉडल चर को सही तरीके से सेट करते हैं?

एक त्वरित और गंदा समाधान माता-पिता का उपयोग करके माता-पिता के दायरे तक पहुंचना है।

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

$ पैरेंट समाधान का उपयोग करके अपने फिडल के वर्किंग वर्जन को देखने के लिए क्लिक करें।

यदि आप नेस्टेड टेम्पलेट्स या नेस्टेड एनजी-दोहराने से निपट रहे हैं तो $parent का उपयोग समस्याएं पैदा कर सकता है। एक बेहतर समाधान नियंत्रक के दायरे में एक फ़ंक्शन जोड़ने के लिए हो सकता है जो नियंत्रक के दायरे का संदर्भ देता है। जैसा कि पहले ही उल्लेख किया गया है, बच्चे के क्षेत्रों में अभिभावक कार्यों को कॉल करने की पहुंच है, और इस प्रकार नियंत्रक के दायरे को संदर्भित कर सकते हैं।

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

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

बेहतर विधि का उपयोग कर अपने फिडल का एक वर्किंग वर्जन देखने के लिए क्लिक करें


यह काम

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

यहां हम $ माता-पिता का उपयोग कर सकते हैं ताकि हम एनजी-दोहराने के बाहर कोड तक पहुंच सकें।

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>

कोणीय जेएस कोड

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/





angularjs-ng-click