8

Angularコントローラーの$viewContentLoadedイベントでjquery関数を呼び出すことができません。同じコードを次に示します。

$scope.$on('$viewContentLoaded', function() {
    jQuery.growlUI('Growl Notification', 'Saved Succesfully');
    jQuery('#category').tree()
    });

ここで構成は必要ですか？noConflict（）;も試してみました。var $ jq = jQuery.noConflict（）; 他の構成が必要ですか？

ありがとう、アブドゥル

4

1 に答える 1

21

まず最初に、コントローラーからDOM操作を行わないでください。代わりに、ディレクティブから実行してください。

ディレクティブリンク方式でも同じことができます。elementディレクティブが適用されるにアクセスできます。

必ずangularjsスクリプトの前にjqueryをロードし、次にgrawlUI、three、angularJS、最後にアプリケーションスクリプトをロードしてください。以下はディレクティブのサンプルです

var app = angular.module("someModule", []);

app.directive("myDirective", function () {
    return function (scope, element, attrs) {

        $.growlUI('Growl Notification', 'Saved Succesfully');
        element.tree();
    };

});

anglejsにはjQueryliteが組み込まれています。角度の後に完全なjqueryをロードすると、jQueryはすでに定義されているため、完全なjqueryスクリプトは実行をスキップします。

==コメント後に更新==

コメントの後であなたの質問をもう一度確認し、ajaxを介してロードされたコンテンツが角度ビューの一部のdivに追加されていることに気付きました。次に、element.tree（）jqueryプラグインをそのコンテンツに適用します。残念ながら、上記の例は、ajax応答からのコンテンツが、私が示したディレクティブを使用して要素に追加される前に発生したリンクで発生するため、機能しません。しかし、心配しないでください、方法があります:)それは速くて汚いです、しかしそれはただデモのためです。

これがあなたのコントローラーだとしましょう

function ContentCtrl($scope, $http){
  $scope.trees=[];

  $scope.submitSomethingToServer=function(something){
     $http.post("/article/1.html", something)
          .success(function(response,status){
               // don't forget to set correct order of jquery, angular javascript lib load
               $.growlUI('Growl Notification', 'Saved Succesfully');

               $scope.trees.push(response); // append response, I hope it is HTML
     });
  }

}

さて、コントローラースコープにあるディレクティブ（コントローラーと同じスコープを使用します）

var app = angular.module("someModule", []);

app.directive("myDirective", function () {
    return function (scope, element, attrs) {

        scope.$watch("trees", function(){
            var newParagraph=$("<p>" + scope.trees[scope.trees.length-1] + "</p>" ); // I hope this is ul>li>ul>li...or what ever you want to make as tree
            element.append(newParagraph); 
            newParagraph.tree(); //it will apply tree plugin after content is appended to DOM in view
        }); 
    };

});

2番目のアプローチは、ajaxが完了し、サーバーからコンテンツを取得した後、コントローラーから$broadcastまたは$emitイベントを実行することです（ディレクティブがどこにあるか、コントローラーの範囲外か、範囲内かによって異なります）。次に、ディレクティブをこのイベントにサブスクライブし、渡されたデータ（data = content as string）を受信して​​処理し、上記で示したように残りを実行する必要があります。

重要なのは、ajaxのコンテンツをデータとしてディレクティブに至るまで脅し、それをレンダリングする要素に挿入して、そのコンテンツにツリープラグインを適用することです。

于 2012-08-19T23:30:45.133 に答える