Jquery调用不在Angular的$ viewContentLoaded中工作

Question

无法在Angular控制器的$ viewContentLoaded事件中调用jquery函数,这里是相同的代码.

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

这里需要任何配置?? 我甚至试过noConflict(); var $ jq = jQuery.noConflict(); 它需要任何其他配置吗？

谢谢,阿卜杜勒

Answer 1

首先,不要从控制器进行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加载的内容会附加到角度视图中的某个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
        }); 
    };

});

第二种方法是在ajax完成并从服务器获取内容后,从控制器发送$ broadcast或$ emit事件(取决于指令在哪里,在控制器的范围内).然后指令应该订阅这个事件并通过接收传递的数据(data = content as string)来处理它,并按照我在上面给你看的那样做.

事实是,威胁来自ajax的内容作为数据一直到指令,然后将其注入到你想要呈现它的元素并将树插件应用于该内容.