I am having a problem with angular js.
The thing is, I have bought a html template on the web which has custom javascript that is triggered on document.ready (contains a lot of code) and it does something with the GUI to set it all up and running.
As i switch my routes the the initial logic of the document.ready that was done for the elements inside the ng-view is lost and GUI looks awful.
Can someone tell me what is the best way to solve this issue?
When AngularJS changes the view/you switch your route, it will execute the associated controller-function. Therefore, you could call your initialization code from the controller.
Related
Before learning AngularJS I learned jQuery ( + mustache for templates). Now It is difficult to understand how to work with AngularJS...
I am trying to show modal window for user. Early (jQuery) I created a template, parsed it and appended it to the DOM.
In AngularJS, if I understand correctly, there are more than one way to do it. I can use ngView directive, ngInclude directive, ngBingHtml directive, create custom directive with 'templateUrl', and may be something else...
But I dont want to load templates from server on demand, I want to create script section with type='text/ng-template' and use it.
First of all I cant understand what the right way to choose, second is how dynamicly change templates (I need put template into directive, work with template, delete template, but not directive... yes?)
Thank a lot.
Hi I am trying to implement a back to top button as easily as possibly in my angular app.
I found the angular-backtop directive and it seems perfect but I can't get it to work.
I have angular-backtop.js and angular-backtop.css included in my index file and 'angular-backtop' included as a dependency in my main module.
In the angular-backtop.js the use of scope is present (without $) and I know there is a bug where scope doesn't work with the new angular router which I am using. Is this why the angular backtop isn't working?
It seems like this isn't correlated but I'm not sure why else this wouldn't work.
All you have to do is inject that directive anywhere you want into your html file as
<back-top></back-top>
I am using fullPage.js in an angularJs application on homepage only and no other page / route should get affected, In order to achieve this I am calling destroy on locationChangeSuccess event.
Am I doing it right or could there be any better way to do this?
I guess this is a more generic question. Something like "using jquery plugin only in the home page when using angular.js".
I'm no very familiarized with angular.js, but you probably can initialize the plugin from the angular side only when certain element exist in the DOM.
Something like:
if($('#fullpage').length){
$('#fullpage').fullpage();
}
I'm working on a project with Yii2 and Angular. The structure of the code is as follows:
<html ng-app="myApp">
<head.../>
<body>
...
<div class="body-content"> MAIN CONTENT GOES HERE </div>
...
</body>
</html>
The page contains a header and a column on the left and a center area which is rendered inside the .body-content div. Now, as you can imagine, I have some buttons in there, some other angular widgets, etc..
Yii2 has a really cool feature called renderPartial that will re-render a view file without wrapping it again in the <head> and <body>. I use that to update the content of my main area, by calling that function, getting the response with jQuery and replacing the content.
Now, that causes all buttons that where binded with Angular to stop working (I'm guessing why). My question is: How can I make Angular re-run or re-bind all my (new) DOM elements to their actions?
You would have to use the manual bootstrap way (explained in https://docs.angularjs.org/guide/bootstrap) for angular but doing that would cause a memory leak over time as angular add listener on DOM that you destroy and is not aware of it's removal, so they stay, and so does for the controller / directives / binding and other features that are referenced by your code.
Is yii2 could be wrapped into an angular directive?
I am not sure if I am getting you right - you use a frontend framework AND a backend framework to control your frontend, the latter one deliveres new DOM content you inject into your HTML?
As far as I got it, Angular is best in handling everything while getting the data (be it from the backend in JSON or other format of your choice), NOT new DOM elements.
Angular itself binds to whatever DOM nodes it is added to, handles the content and dependency injection and thus displays your data. In your case the backend PHP framework seems to hand in new DOM elements that Angular thinks of "Hey - you don't want me to be adding them? fine, then I don't." and breaks.
Maybe there are solutions for this specific case, but if I were you I would rethink the concept in terms of "Where do I want my views/templates to be rendered? What part of the whole is responsible for what?" Using two different frameworks, let alone languages, to do the same job and interfering with one another would make a mess I wouldn't want to clean up.
So if you like this Yii2 feature and want to make it work, fine - but in that case - what do you need angular for? And if you'd rather stick to Angular you just have a backend that handles data and hands it back to the frontend to do it's job with it.
Quote from one of the comments regarding ngCloak directive (AngularJS documentation):
It is only really needed on your "index.html" page, because the
browser may try to render things before Angular has had a chance to
parse/compile it. At runtime, when Angular pulls in content due to
ng-view, ng-include, etc., it will be processed by Angular before the
browser renders.
I created a example in jsFiddle to verify this and on my surprise the expression is not evaluated before it is rendered in the browser. I would expect that the template will first be compiled & linked and then attached to the DOM - which is not the case.
Does that mean that every {{expression}} inside templates should also be wrapped in ngCloak to prevent flickering or am I missing something?
My guess is that the alert allow the browser to render before angular finished his job, adding a setTimeout with 0 delay show a rendered template:
http://jsfiddle.net/g/FLZZR/5/
function TemplateController ($scope) {
$scope.expression = "This should already be rendered...";
setTimeout(function(){
alert("... but it isn't.");
});
}
Additional note: you can't expect the template to be rendered at the point you place your alert, at best it would be hidden, angular use dirty checking to do its magic and you must let it "digest" your changes for them to show in the DOM.