I just added the dynamic content via ajax. but the angular bindings are not working with the dynamic content.
I just found an answer on stack over flow to use $compile. I tried now it works but angular material things are not working now.
Please can someone suggest a solution.
That would be nice :)
Update with Code
consider the following to be added content by ajax.
var data = md-slider>
this content when added by ajax doesnt work so i did a compile.
var html = $compile(data)($scope)
and then when we add this to the document via jquery the slider doesn't work.
$('#example').html(html);
Related
I have downloaded a jquery scheduler and wanted to see it working. Unfortunately they dont have any info on how to implement it or get it working.
The Github page is here.
Its a widget however I am unsure how to make it work. I created an Asp.net mvc project and a page for it and thought it was to do with the id for a div but I had no luck.
How do I get this to work in an Asp.net mvc page?
Your questions is probably gonna get closed, but this is how you would use it, based on the source code:
$("#yourElement").scheduler({scheduleStart:'07:00',
scheduleEnd:'20:00',
overlap:true,
newEventAdded:function($event, data){},
eventChanged:function($event, data){},
eventClicked:function($event, data){},
initNewEvent:function(){
return {};
});
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
Im looking for a Angular page script, that could do something like this on the drawing.
I need a goto page button and prev/next buttons.
The page should contain a page starting with a div tag and contain normal html and angular tags.
I have tried out some Carousels, but they are not build for this purpose.
Anyone with a good link og code exampel?
Im using Bootstrap, HTML5 and AngularJS, and I want to keep it to this.
Anyone else with a suggestion?
AngularStrap dosent support carousel, and Im using AngularStrap in other parts of my code. When I using ui.bootstrap it fails when using ui-bootstrap-tpls-0.12.0.min, and AngularStrap uses of different versions of ui-bootstrap-tpls.
My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.
I am new to AngularJs and I got stuck with a situation where I need your help.
I am loading content using $http service within an angularjs controller and on loading the content I am replacing the new content (with the new controller) from Ajax with the whole currently working controller and I am doing this replacing part using jQuery .html() function. Now the issue is that the content loaded perfectly but the functionality of new controller is not working at all.
As I told that I am new here, please guide me if I am following right technique and what would be the solution to this problem or is there any new option to do task.
I also tried loading the content with directive but after using it, the loaded content won't perform any functionality at all.
you need to compile the new content (with new controller) before replacing it. you can use $compile service for that.
This works for me.
angular.bootstrap($('body'), ['app']);