jquery-ui - Jquery 调用在 Angular 的 $viewContentLoaded 中不起作用

Question

无法在 Angular Controller 的 $viewContentLoaded 事件中调用 jquery 函数，这里是相同的代码。

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

这里需要什么配置吗？？我什至尝试了 noConflict(); var $jq = jQuery.noConflict();
它是否需要任何其他配置？

谢谢，
阿卜杜勒

Answer 1

首先，不要从 Controller 进行 DOM 操作。而是从指令中执行。

您可以在指令链接方法中做同样的事情。您可以访问 element应用了哪个指令。

确保在 angularjs 脚本之前加载 jquery，然后是 grawlUI、三、angularJS，最后是您的应用程序脚本。以下是指令样本

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

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

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

});

angularjs 内置了 jQuery lite。
如果在 Angular 之后加载完整的 jquery，由于 jQuery 已经定义，完整的 jquery 脚本将跳过执行。

==评论后更新==

我在评论后再次查看了您的问题，并意识到通过 ajax 加载的内容被附加到您的 Angular View 中的某个 div 中。然后你想将 element.tree() jquery 插件应用于该内容。不幸的是，上面的示例将不起作用，因为它是在您的 ajax 响应内容附加到带有我向您显示的指令的元素之前发生的链接时触发的。但别担心，有一种方法 :) 虽然它又快又脏，但它只是用于演示。

假设这是您的 Controller

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
     });
  }

}

现在，在 Controller 范围内的指令(它使用与 Controller 相同的范围)

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
        }); 
    };

});

第二种方法是在您的 ajax 完成并从服务器获取内容后，从 Controller (取决于指令在哪里，在 Controller 的范围内或范围内)进行 $broadcast 或 $emit 事件。然后指令应该订阅这个事件并通过接收传递的数据(数据=内容作为字符串)来处理它，然后按照我上面向你展示的那样做剩下的事情。

问题是，将来自 ajax 的内容作为数据一直威胁到指令，然后将其注入(inject)到您要在其中呈现它的元素并将树插件应用于该内容。