jQuery的调用不是在角$ viewContentLoaded工作 [英] Jquery calls not working in $viewContentLoaded of Angular
问题描述
无法调用角控制器的$ viewContentLoaded事件jQuery的功能，这里是code为相同。
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（）;变种JQ $ = jQuery.noConflict（）;
是否需要任何其他配置？
Is any configuration required here?? I tried even noConflict(); var $jq = jQuery.noConflict(); Does it require any other configuration?
谢谢，
阿卜杜勒
Thanks, Abdul
推荐答案
第一件事，第一，不要从控制器做DOM操作。相反，这样做的指令。
First thing first, don't do DOM manipulation from controller. Instead do it from directives.
您可以做同样的事情在指令中的链接方法。您可以访问元素在其上应用指令。
You can do same thing in directive link method. You can access the element on which directive is applied.
请确保您angularjs脚本，然后grawlUI，三，angularJS最后你的应用程序脚本之前加载jQuery的。下面是指令样品
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的精简版。
如果后角放入全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是附加到某些格在你的角度认为该内容。那么你要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.
让我们说这是你的控制器
Let's say this is your controller
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完成，你会得到来自服务器的内容之后。然后指令应订阅此事件，并通过接收传递的数据（数据=内容字符串）处理，并做休息，因为我向您展示了以上。
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.
问题是，威胁来自阿贾克斯的内容作为数据一路谈到指令，然后将其注入到要使它和应用树插件内容元素。
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的调用不是在角$ viewContentLoaded工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
