Jquery 调用在 Angular 的 $viewContentLoaded 中不起作用 [英] Jquery calls not working in $viewContentLoaded of Angular

问题描述

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

Unable to call jquery functions in $viewContentLoaded event of Angular controller, here is the code for the same.

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

这里需要什么配置吗??我什至尝试过 noConflict();var $jq = jQuery.noConflict();是否需要其他配置?

Is any configuration required here?? I tried even noConflict(); var $jq = jQuery.noConflict(); Does it require any other configuration?

谢谢，阿卜杜勒

推荐答案

首先，不要从控制器进行 DOM 操作.而是从指令中执行.

First thing first, don't do DOM manipulation from controller. Instead do it from directives.

你可以在指令链接方法中做同样的事情.您可以访问应用指令的 element.

You can do same thing in directive link method. You can access the element on which directive is applied.

确保在 angularjs 脚本之前加载 jquery，然后是 grawlUI，三个，angularJS，最后是您的应用程序脚本.下面是指令示例

Make sure you load jquery before angularjs scripts, then grawlUI, three, angularJS and finally your application script. Below is directive sample

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 脚本将跳过执行.

angularjs has built in jQuery lite. if you load full jquery after angular, since jQuery is already defined, the full jquery script will skip execution.

==在您发表评论后更新==

==Update after your comment==

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

I reviewed again your question after comment and realised that content which is loaded trough ajax is appended to some div in your angular view. Then you want to apply element.tree() jquery plugin to that content. Unfortunately example above will not work since it is fired on linking which happened before your content from ajax response is appended to element with directive I showed to you. But don't worry, there is a way :) tho it is quick and dirty but it is just for demo.

假设这是您的控制器

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

}

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

Now, directive which is in controller scope (it uses same scope as 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 完成并从服务器获取内容后，从控制器(取决于指令在控制器的范围内、外或范围内)发送 $broadcast 或 $emit 事件.然后指令应该订阅这个事件并通过接收传递的数据(数据=内容作为字符串)来处理它，然后按照我上面展示的那样做剩下的事情.

The second approach would be to $broadcast or $emit event from controller (depends where directive is, out or in scope of controller) after your ajax completes and you get content from server. Then directive should be subscribed to this event and handle it by receiving passed data (data=content as string) and do the rest as I showed you above.

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

The thing is, threat that content from ajax as data all the way it comes to directive, then inject it to element in which you want to render it and apply tree plugin to that content.

这篇关于Jquery 调用在 Angular 的 $viewContentLoaded 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！