केस -1 में एनजी-क्लिक क्यों काम नहीं करता है, लेकिन मामले -3 में करता है?

Question

स्पष्ट रूप से कुछ बुनियादी है जो अभी तक समझ में नहीं आता है।

इम कोणीय Ui.Bootstrap लेकिन im खोज कि मेरे क्लिक open() समारोह को सक्रिय नहीं कर रहे हैं में मॉडल मॉड्यूल के उपयोगकर्ता बनाने की कोशिश कर - तो यह एक बहुत ही सरल testcase को उबलते नीचे, नीचे के रूप में, आईएम किसी भी कॉल नहीं देख जब एनजी-क्लिक एक फंक्शन (अलर्ट या कंसोल.लॉग) पर इंगित करता है, लेकिन जब काम करता है तो एनजी-क्लिक पॉइंट्स को केवल एक अभिव्यक्ति

पहले उदाहरण में 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/

Answer 1

ng-click या तो वर्तमान क्षेत्र (ताकि उदाहरण $scope.alert = window.alert के लिए वहाँ सचेत करने के लिए सक्षम नहीं होने की समस्या का समाधान होगा) या एक कोणीय अभिव्यक्ति में एक समारोह के साथ प्रयोग के लिए है। ऐसा लगता है कि कोणीय आपको वैश्विक स्कोप विधियों का उपयोग करने की अनुमति नहीं देता है (यह उन्हें वर्तमान $scope में देख रहा है, जिससे वे गायब हैं)।

Answer 2

कि के लिए काम करने के लिए, आप अपने $scope पर alert परिभाषित करने के लिए है: दस्तावेज़ से

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

प्रासंगिक टुकड़ा:

AngularJS भाव के भीतर से खिड़की वस्तु का उपयोग करने की अनुमति नहीं देता है क्योंकि यह एक है मनमाने ढंग से जावास्क्रिप्ट कोड निष्पादित करने के लिए ज्ञात तरीका।

https://docs.angularjs.org/error/ $ पार्स/isecwindow

Answer 3

आप एनजी निर्देशों में कोड उस तरह अमल नहीं कर सकते। वे आपके स्थानीय दायरे में सामग्री की तलाश करते हैं। अपने टेम्पलेट

ng-click="alert()" 

यह जावास्क्रिप्ट ठीक से चेतावनी पर अमल करेंगे

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

और उसके बाद:

आप अपने नियंत्रक में ऐसा करते हैं तो।

Answer 4

ng-click एक angular expression की उम्मीद है। आंतरिक रूप से, कोणीय $parse सेवा का उपयोग कर रहा है ng-click="expression" में expression मूल्यांकन करने के लिए।

एक कोणीय अभिव्यक्ति नियमित जावास्क्रिप्ट कोड के रूप में ही नहीं है। $parse अभिव्यक्ति की व्याख्या करने के लिए स्ट्रिंग पार्सिंग का उपयोग करता है और यह $scope ऑब्जेक्ट के गुणों या $parent स्कोप ऑब्जेक्ट्स के गुणों के गुणों, prototypical inheritance chain पर उपलब्ध होने के लिए वेरिएबल, फ़ंक्शंस और ऑब्जेक्ट्स तक पहुंच को प्रतिबंधित करता है।

तो सिद्धांत रूप में आप वैश्विक इस तरह पहुंच सकता है:

$scope.window = window; 
$scope.alert = alert; 

...और फिर अपने टेम्पलेट में क्या ng-click="window.alert('hello!')"

... या ... ng-click="alert('hello!')"

---

या आप यह सिर्फ एक बार कर सकता है:

$rootScope.window = window; 
$rootScope.alert = alert; 

तो किसी भी गुंजाइश है कि prototypically $rootScope से विरासत होगा खिड़की और चेतावनी तक पहुंच भी है।

---

... लेकिन संभवतः डिबगिंग उद्देश्यों को छोड़कर, ऊपर दिए गए किसी भी काम को करने के अच्छे कारण नहीं हैं। यह कहना नहीं है कि $rootScope सजाने हमेशा एक बुरा विचार है, कम से कम one special case where decorating angular's scope can accomplish something that would be very difficult to do otherwise है।

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