无法在Angular控制器的$ viewContentLoaded事件中调用jquery函数,以下是相同的代码。
$scope.$on('$viewContentLoaded', function() { jQuery.growlUI('Growl Notification', 'Saved Succesfully'); jQuery('#category').tree() });
这里需要任何配置吗?我什至尝试了noConflict(); var $ jq = jQuery.noConflict(); 是否需要其他配置?
谢谢阿卜杜勒
首先,不要从控制器进行DOM操作。而是从指令执行。
您可以在指令链接方法中执行相同的操作。您可以访问element在其上应用了指令。
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的内容作为数据一直传递到指令,然后将其注入到要呈现它的元素中并将树插件应用于该内容。