AngularJS में कस्टम ईवेंट कैसे देखें?

सरल उदाहरण: मैं एक पाठ क्षेत्र है और यह करने के लिए अतिरिक्त व्यवहार प्रदान करना चाहते हैं: enter कुंजी पर कुछ करना और मुझे लगता है कि मुझे लगता है कि व्यवहार जोड़ने के लिए अतिरिक्त निर्देश प्रदान करना चाहिए shift + enterAngularJS में कस्टम ईवेंट कैसे देखें?

पर अगली पंक्ति में जाते हैं। और मैंने यह किया है: http://jsbin.com/oruvuy/1/edit

पीएस एक हैकी चीज मेरे लिए अजीब लगती है: मैं मैन्युअल रूप से $digest() का आह्वान करता हूं। ठीक है न? कोई विचार?

जे एस:

angular.module('Chat', []) 
    .directive('enterSubmit', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     var submit; 

     $(element).on({ 
      keydown: function (e) { 
      submit = false; 

      if (e.which === 13 && !e.shiftKey) { 
       submit = true; 
       e.preventDefault(); 
      } 
      }, 

      keyup: function() { 
      if (submit) { 
       scope.$eval(attrs.enterSubmit); 

       // flush model changes manually 
       scope.$digest(); 
      } 
      } 
     }); 
     } 
    }; 
    }); 

function ChatCtrl($scope) { 
    $scope.messages = [{ 
    text: 'Sample Message', 
    datetime: new Date() 
    }]; 

    $scope.add = function() { 
    $scope.messages.push({ 
     text: $scope.message, 
     datetime: new Date() 
    }); 
    $scope.message = ''; 
    }; 

    $scope.message = ''; 
}

<body ng-controller="ChatCtrl"> 

    <h1>Leave message:</h1> 
    <form> 
    <div class='hint'>Click &lt;Enter&gt; to submit :)</div> 
    <textarea 
     cols="30" 
     rows="5" 
     ng-model="message" 
     enter-submit='add()' 
    ></textarea> 
    <br /> 
    <button type="submit" ng-click="add()">Send message!</button> 
    </form> 

    <h3>Messages list:</h3> 
    <table> 
    <tr> 
     <th>Text</th> 
     <th>Date</th> 
    </tr> 
    <tr ng-repeat="message in messages"> 
     <td class='text'>{{message.text}}</td> 
     <td class='date'>{{message.datetime | date:"HH:mm:ss"}}</td> 
    </tr> 
    </table> 

</body>

लेकिन यह है कि ऐसा करने का सही तरीका क्या है?

स्रोत

2013-02-17 ValeriiVasin

हां, निर्देश के लिंकिंग फ़ंक्शन में बाइंडिंग ईवेंट बिल्कुल वही है जो आप करना चाहते हैं।

$ डाइजेस्ट को कॉल करना हैकी नहीं है - आपके उदाहरण में संदेश keyup पर मॉडल में जोड़े जा रहे हैं, और कोणीय कुछ बदलावों को तब तक पच नहीं पाएगा जब तक कि कुछ इसे न कहें। यह वास्तव में अगले keydown पर पच जाएगा, लेकिन चूंकि आपको अपने keyup के बाद होने वाली $ पाचन की आवश्यकता है, तो आपको इसे मैन्युअल रूप से कॉल करना होगा।

स्रोत

2013-02-17 21:47:46 jingman

ग्रेट, स्पष्टीकरण के लिए धन्यवाद। लेकिन मुझे घटनाओं के बारे में समझा नहीं गया है। AngularJS पृष्ठ पर सभी घटनाओं के लिए सुन रहा है और फिर हर वस्तुओं की स्थिति की जांच? क्या इसके बारे में कोई समझदार लेख है? मैंने इसके बारे में AngularJS पर पढ़ा है, लेकिन जल्दी से समझना मुश्किल है। – ValeriiVasin

मैं एक अच्छा संदर्भ के रूप में [इस स्टैक ओवरफ्लो प्रश्न] की सिफारिश करता हूं (http://stackoverflow.com/questions/12463902/how-does-the-binding-and-digesting-work-in-angularjs)। – jingman

AngularJS में कस्टम ईवेंट कैसे देखें?

उत्तर

संबंधित मुद्दे