3

私はangularjsを学んでいて、jQueryとangularjsを混ぜて何かをしています。これが正しい方法ではないことはわかっていますが、これを行うAngularjsの正しい方法はわかりません。

HTMLには、divタグをページに動的に追加するための単なるボタンであるこのタグがあります。

<div ng-controller="pgCtrl">
    <button id="new-btn" ng-click="newDiv()">Gimme a div!</button>
</div>

JavaScriptにはこれがあります：

app.controller('pgCtrl', function($scope){
    $scope.newDiv = function(){
        // Load an element that uses controller anotherCtrl
        $('<div class="blah" ng-controller="anotherCtrl">' +
            '<button id="another-btn" ng-click="stuff()">-</button>{{stuff}}' +
            '</div>').appendTo('body');
        angular.bootstrap($('.blah'), ['app']);
    };
});

これがAngularjsでこれを行う「適切な」方法ではないことはわかっています。私はさまざまな基本的なjQueryを混ぜていますが、それは機能しますが、これを行うことは何も学んでいません。

4

1 に答える 1

6

angular を使用する場合は、スコープ オブジェクト ( Model ) を最初に更新することを常に考えてください。ngマークアップ (ビュー) には、スコープ オブジェクトの処理を処理する多数の組み込みディレクティブがあります。

実際、angular を使用する場合は、ページに jQuery を含めないことをお勧めします。jQuery DOM 操作方法論から離れて、モデル/コントローラー/ビューを考え始めるのに役立ちます。

この投稿は、jQuery から angular への移行を検討しているすべての人にとって必読です。

デモの簡単なスターターは次のようになります。

app.controller('pgCtrl', function($scope){
      $scope.items=[];
      $scope.newDiv=function(){
           $scope.items.push( {stuff: 'Some stuff text'}
      }
})

次に、ビューで使用するng-repeatので、ボタンを何度でもクリックして追加し続けることができますstuff

<div ng-repeat="item in items" >
        <div class="blah" ng-controller="anotherCtrl">
            <button id="another-btn" ng-click="stuff()">-</button>{{item.stuff}}
         </div>

</div>
于 2013-11-03T00:35:03.700 に答える