一尘不染

jQuery调用在Angular的$ viewContentLoaded中不起作用

angularjs

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

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

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

谢谢阿卜杜勒


阅读 255

收藏
2020-07-04

共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的内容作为数据一直传递到指令,然后将其注入到要呈现它的元素中并将树插件应用于该内容。

2020-07-04