AngularJS'deki özel olaylara nasıl göz atılır?

Basit bir örnek: Bir textarea var ve ona ek davranışı sağlamak istiyoruz: enter tuş üzerinde bir şeyler yapmak ve ben o davranışı eklemek için ek direktifini vermelidir varsayalım shift + enterAngularJS'deki özel olaylara nasıl göz atılır?

sonraki satıra gidin. Ve bunu yaptım: http://jsbin.com/oruvuy/1/edit

P.S. Tek hacimli bir şey benim için garip görünüyor: $digest()'u manuel olarak çağırıyorum. Tamam mı? Düşüncesi olan var mı?

JS:

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>

Ama bunu yapmak için doğru yolu nedir?

kaynak

2013-02-17 ValeriiVasin

Evet, yönergenin bağlantı işlevindeki etkinlikleri bağlamak, tam olarak yapmak istediğiniz şeydir.

$ digest çağrısı hacky değil - örneğinizdeki iletiler, keyup modeline ekleniyor ve Açısal, bir şey söylenene kadar bu değişiklikleri sindirmeyecek. Aslında bir sonraki keydown'da sindirilecek, ancak keyup'unuzdan sonra $ digest'e ihtiyacınız olduğu için, bunu elle aramak zorundasınız.

kaynak

2013-02-17 21:47:46 jingman

Harika, açıklama için teşekkürler. Ama olaylarla ilgili anlaşılmadım. AngularJS sayfadaki tüm olayları dinliyor ve sonra her nesnenin durumunu kontrol ediyor? Bunun hakkında anlaşılabilir bir makale var mı? AngularJS'i bu konuda okudum, ama çabucak anlamak zor. – ValeriiVasin

[Bu StackOverflow sorusu] (http://stackoverflow.com/questions/12463902/how-does-the-binding-and-digesting-work-in-angularjs) iyi bir başvuru kaynağı olarak öneririm. – jingman

AngularJS'deki özel olaylara nasıl göz atılır?

cevap

İlgili konular