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和最后是应用程序脚本之前加载jquery。以下是指令示例

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作为字符串）来处理该指令，并按照上面的说明进行其余操作。

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