I am quite new to angular and currently facing a problem on a website, where we need html5Mode(true) while at the same time keep normal links working like they would do with html5Mode(false).
We have our ng-app in the html-tag - so the whole page is under controll of a module. On some pages we need to load new content via ajax and a change of the underlying model in the specific controller. This should change the URL to a new (absolute) one. Achieving this is kind of simple by $locationProvider.html5Mode(true); in the module-config.
Now the Problem: as we activate html5Mode, normal links would not work as expected any more. Is there any way to achieve the desired behavior without fragmenting the page into multiple modules that kind of leave the "normal links" out of the scope of angular and the html5Mode-setting of the module?
I had the idea to simply use history.pushState() in the controller-function, that handles the click-event for the content-reload, but this does throw a lot of exceptions on the one hand and does not even work properly on the other hand.
Any idea is very much appreciated :-)
Best regards, SubnetOne
Finally I found the solution:
Module.directive('a', function () {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
This ads a target="_self" to all links (anchor-tags) on the page. Due to angulars hijacking of links depends on
!elm.attr('target') = true
links WITH a target will behave like intended.
Thanks to Niks answer to
angular.js link behaviour - disable deep linking for specific URLs
and Sebastians answer to
Conditionally add target="_blank" to links with Angular JS I finaly solved the issue :-)
Related
I have a very simple angular application that has one service which uses a http request to pull down a web page. I then want to display that page within my application using ng-bind-html.
template:
<div class="container" ng-bind-html="data"></div>
controller:
this.service.getHoliday().then(function(data) {
$scope.data = $sce.trustAsHtml(data);
});
this works from a visual perspective, however it would appear the javascript/jquery files are loaded but not used. I feel like this is because the elements are not available when it is run.
I feel like the best option to resolve this is to somehow rebind all the elements, is it possible to rebind the entire page without caring about each individual selector.
I've tried using a $apply() method, wrapping the above like so:
this.service.getHoliday().then(function(data) {
$scope.$apply(function() {
$scope.data = $sce.trustAsHtml(data);
});
});
but this stops the page from loading the html completely, i understand that this is vague but hopefully someone has come up against a similar issue that can help.
We are using Bootstrap nav-tabs on our new website's events pages to create different sections on a single page related to our events — About, Speakers, Travel, Register and so on.
Our events coordinator would like to be able to link directly to the individual speakers who appear on the Speakers tab from outside the website. Normally, this is pretty simple — http://domain.name/events/eventspage#speakerID.
However, because we're using nav-tabs, there isn't an easy and obvious way of creating this link. I've looked through posts here and elsewhere to see if anyone else has addressed this problem, but have yet to find anything.
The site was built using Bootstrap 3 and uses ExpressionEngine 2.10 as the CMS.
You can view a working example of how our events pages are set up at https://www.rjionline.org/events/rjicollab.
Any suggestions would be appreciated.
This is how it can work with jQuery:
Select an anchor within a JQUERY Tab from a link on anther webpage
You can adapt the code from there.
Here you can try this function:
function goToTab(){
var hash=document.location.hash,
prefix="tab_";
if(hash)
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show')
};
I am writing a web app using AngularJS on the frontend and I'm implementing a return to top button at the bottom of the page.
<h1 id = "top">
..........
Return to Top
However, this does not work at all. I'm lost because this has worked before on other apps that do not use Angular. So do I have to do something different here?
add target="_self" to href will solve the problem. Thanks to #Chandermani
There's no inherent reason that Angular should interfere with the native operation of a link. Is it possible that the link isn't doing what you expect because the h1 element with the anchor isn't in the DOM anymore at the time you click the link? For example, could you have conditionally removed a parent or ancestor element of that h1 tag with an ng-if directive?
Update: Apparently there is an inherent reason that Angular would interfere. Thanks for the lesson, #Chandermani.
First of all I warn you i am new in HTML development...
I am creating a website using Bootstrap. I have some buttons on the left as you can see in the screenshot and I want to content on the right to change without having to load the whole page.
Any help here? Thanks a lot!
You'll need to use JavaScript, which is the standard programming language that ships with all modern web browsers. In JavaScript, there is an API called the DOM (Document Object Model) which represents the current page as an object. You can use that API to change the text contained in the div tag.
Here is the W3Schools page on the DOM.
There are a few JavaScript libraries that try to abstract and simplify DOM manipulation. The most famous is jQuery.
You can try using AngularJS or any MVC framework/library. These might be a little heavy-handed for something simple, but they'll help achieve what you're looking for. Pretty good to learn these anyway as they're in high demand.
Here's AngularJS's homepage with docs and tutorials. You'd want to look at information on routing view templates using the ngView module, or you can use ui-router, created by Angular's UI team (my personal favorite) for nested views.
PS: Stay away from W3Schools
http://www.w3fools.com/
I am trying to use Backbone.Paginator.js to run more than one app (multiple instances of paginator) on the same page.
I created a test page. (Navigate to backbone.paginator/examples/netflix-infinite-paging).
I left the code as is for app.js and create app2.js, which is a clone of app.js but all the javascript code is located in one file and the app has been renamed to app2.
Two instances work on first load of the page but subsequent request/refreshes only load app2.js's data.
Is it possible to run multiple instances on the same page?
I am interested in using an auto-paging (infinite/endless scroll) so
I tried to use Paul Irish's jQuery Infinite Scroll plugin but
I am unable to get it to work.
I am initiating the plugin to run on document ready (which does not
work, as expected), but also running the code in the app2's
ResultView, which does not work as well.
Any ideas on how to get an auto-paging infinite scroll solution?
I ran into https://github.com/joneath/infiniScroll.js but I am not
sure how to integrate it with Backbone.Paginator.js.
I am still learning and any help would be greatly appreciated! :)
UPDATE: After further testing across different browsers, it seems like the problem might be to caching issue/differences. For example, in Safari, it works sometimes (randomly) when refreshing the page. I am not sure how to debug that. Any ideas?
Questions:
1- Are you including the jQuery Javascript framework dependencies as well in your codebase?
2- I have downloaded the zip file, ran it on Xammp locally and it appears to be a downloaded demo not a test page, can you please confirm which page is your test page from the compressed file attached to your question?
3- Can you create a mockup (in case that there is some server side code happening) in jsfiddle?
4- The link provided for the Infinite scroll jquery plugin is broken, it should be: https://github.com/joneath/infiniScroll.js
If you want to make the jQuery paginator plugin to be independent, you might want to trigger it considering the container element as well
....
From the suggested link, I think that we should experiment with this. Else you might want to create a cookie or something for the browser to remember the changes to the plugin on multiple instances.. Here are some thoughts?
1#
Backbone.InfiniScroll(collection, **options**)
Instantiate a new InfiniScroll object after your Backbone view has been rendered.
myView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.render();
this.infiniScroll = new Backbone.InfiniScroll(this.collection, {success: this.appendRender});
}
)};
2# At a glance from the Options menu
target: $(window),
Perhaps we should try:
$(body).find('#container1'),
-or-
$(window).children('div').hasClass('container'),
Just some ideas, haven't experimented it myself-
3# You might want to make (1) to be a javacript function and trigger it based on a class or on it's id for initializing the scroll over a desired container.
That's all the ideas I could come up by taking a look real quick, but feel free to reply if it helps out or at least gives some direction.
4# Another thought is that myView can be a variable with an id of a timestamp in Javascript, that way you can ensure uniqueness and since you are calling new then you could have several instances of the plugin running for your view.