タグ

ブックマーク / angularjsninja.com (3)

  • AngularJS で Enter キーを検出するコード - AngularJS Ninja Blog

    テキストボックスなどで、Enter キーによるイベント処理を記述するコード例をいくつか。 $event オブジェクト ng-keydownなどの directive を利用する際には、$eventでイベントオブジェクトを利用。 1 2 3 4 5 6 7 $scope.comments = []; $scope.handleKeydown = function(e) { if (e.which !== 13) { $scope.comments.push($scope.newComment); $scope.newComment = ''; } } 1 2 3 4 <input type="text" ng-model="newComment" ng-keydown="handleKeydown($event)"> <ul> <li ng-repeat="comment in commen

  • AngularJS のデータバインドを支える $apply - AngularJS Ninja Blog

    データバインドが効かない?! AngualrJS を使っていて楽しいのは超ラクチンなデータバインド。なのに、そのデータバインドで以下のような困ったことに遭遇しているとしたら、それは $apply を学ぶときが来ているということ。 データバインドが効かないぞ?! データの反映が次のイベントまで遅れてる気がする?? こういうときは $apply の出番だ。$apply を使う必要があるケースというのは、ざくっと言うと AngularJS が知りえないところでイベントが起こっているとき。$apply で AngularJS に変化が起きていることを伝え、後のことは任せることができる。 $apply が必要ないケース 整合性を維持するための dirty checking($watch)処理は、$digest ループ(サイクル)でまとめて実行される。この $digest ループが始まるきっかけは、『

  • AngularJS ではモデルをどう宣言すればいいのか - AngularJS Ninja Blog

    AngularJS の ng-model、大事なのは dot があること AngularJS では、モデルをどこに宣言すればいいんだってのがわかりにくい。 controller に $scope があって、簡単なサンプルコードでは大抵そこに直接$scope.nameみたいに記述されているので、同じように書いてしまう。 うまくいかないコード例は以下。 <!-- うまくいかないコード --> <div ng-controller="ParentController"> <input type="text" name="parent" ng-model="name"> <div ng-controller="ChildController"> <input type="text" name="child" ng-model="name"> </div> </div>

  • 1