无法在Angular控制器的$viewContentLoaded事件中调用
jquery函数,这里是相同的代码.
$scope.$on('$viewContentLoaded',function() {
jQuery.growlUI('Growl Notification','Saved Succesfully');
jQuery('#category').tree()
});
这里需要任何配置??我甚至试过noConflict(); var $jq = jQuery.noConflict();
它需要任何其他配置吗？
谢谢,
阿卜杜勒
解决方法
首先,不要从控制器进行DOM操作.而是从指令中做到.
您可以在指令链接方法中执行相同的操作.您可以访问应用指令的元素.
确保在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",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)来处理它,并按照我在上面给你看的那样做.
