I'm having a problem with angular routing mechanism:
$routeProvider
.when("/", { templateUrl: "/*some MVC calls to return a partial view*/"})
.when("/somewhere/:someParams", { templateUrl: "/*some MVC calls to return a partial view*/"})
...
.otherwise({redirectTo: "/"})
The problem is I'm using a wrapbootstrap's theme (more accurately the Ace) and it has lots of functionality based on <a> tags and href="#" attributes and whenever the user clicks an element (like the dropdown menus which also have a <a href="#"> tag), angularjs jumps in and tries to parse the url which looks like this most of the time: http://localhost/site/somewhere/someParams#
any suggestions on how to separate these two functionality?
thanks in advance
You can take a look at the answer here. The approach is to have a directive that will prevent the default action (in your case, navigating to "/#").
You can modify the directive to navigate only when the location is not "/#". Using the attrs parameter in the function (see the accepted answer for the above question) identify the value of the href attribute. Based on its value you can then chose to proceed normally or to prevent the browser from navigating to the URL.
Actually I found my answer today while reading AngularJS's docs. the <a> tag is already a directive in angular and it's written so that when given an empty href (<a href="">) it prevents the default behavior of the a tag
Related
I have a template which is nested inside another template which I want to load when i click on a button.
So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 when
the button is clicked
What can I do for it to load the template....
This is my controller
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1#parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2#parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3#parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.
I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.
I'm not sure you can use uiView to load html dynamically.
I would try another possible solutions:
Use directives
Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview
Here is my case:
I have a div which needs to get some html injected from a function:
<div ng-bind-html="myCtrl.getMyLink()"></div>
in my controller I have:
this.getMyLink = function () {
return '<a ui-sref="app.go.to.state1">my link</a>';
}
It works but not at all. All I have at the end in my html is only
<a>my link</a>
It's a link but the ui-sref redirection is not working.
There is surely something I'm missing.
How can I fix that?
ng-bind-html does not work with ui-sref directive. Just use href="path/to/state1" instead
The content inside ng-bind-html doesn't get compiled by angular, it is intended for static html.
You would need to use your own directive instead and either set a template or do your own compiling with $compile.
Alternatively you might be able to use ng-include. There aren't enough details given for your use case to help much more
If you're at a location like this...
http://www.domain.com/index.html
... and you have a link that points to the same location...
My Link
... then clicking on the link does nothing. Normally you would be redirected to the page as normal; a handy way to refresh the page (without doing a full refresh).
I've traced the culprit of this odd behaviour to AngularJS.
Observe the following example:
<body>
Sample Link
<script>
var SampleApp = angular.module("SampleApp", []);
</script>
</body>
http://jsfiddle.net/7vqD9/
By clicking on the link the browser tries to go to the same location (because of a blank href). This is normal.
Now let's activate Angular:
<body ng-app="SampleApp">
Sample Link
<script>
var SampleApp = angular.module("SampleApp", []);
</script>
</body>
http://jsfiddle.net/7bEp3/
Clicking on the link does nothing.
Why does AngularJS break links in this way? Is there any obvious reason that I'm missing?
Why does Angular prevent classic behavior of href?
From Mastering web component with AngularJs:
AngularJS comes pre-bundled with the a directive, which prevents
default actions on links when the href attribute is omitted. This
allows us to create clickable elements using the a tag and the
ng-click directive. For example, we can invoke the atag as follows:
<a ng-click='showFAQ()'>Frequently Asked Questions</a>
Having the a tags without a default navigation action is handy, as
several CSS frameworks use the a tags to render different types of
visual elements, where a navigation action doesn't make much sense.
For example the Twitter's Bootstrap CSS framework uses the a tags to
render headers in tabs and accordion components.
Keyword to retain is: "handy"
Angular overrides the a tag: https://github.com/angular/angular.js/blob/master/src/ng/directive/a.js
The lines to note here are:
// if we have no href url, then don't navigate anywhere.
if (!element.attr('href')) {
event.preventDefault();
}
Angular does this because of ngHref, which sets the href only after angular and scope are fully loaded, thus preventing the user from accidentally going to /{{pageUrl}}/.
If you want to reload the page, you should look at the $location service provided by Angular.
I have single page app made with ember.js and I have some problems with implementing social sharing.
I need to implement into hbs template something like this:
Link
However when this is rendered into browser there are additional script tags concatenated within the href string, eventually the link works and I am redirected but instead title I get something like this:
<script id='metamorph-190-start' type='text/x-placeholder'></script>
MyTitle
<script id='metamorph-19...
Where I need just MyTitle.
More specifically I use the following hbs template for facebook sharing, the model is initialized into the router:
<a href="https://www.facebook.com/login.php?next=http%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fs%3D100%26p%255Btitle%255D%3D{{model.title}}%26p%255Burl%255D%3D{{model.url}}%26p%255Bsummary%255D%3D{{model.summary}}%26p%255Bimages%255D%255B0%255D%3D%2540Model.EventImage%2527%253EShare&display=popup"
target="_blank">
<img src="http://www.simplesharebuttons.com/images/somacro/facebook_img.png" alt="Facebook" />
</a>
I also tried third party libraries, like janrain, ShareThis or AddThis, but with them I had initialization problems, buttons were not shown at all when placed into template, and also had problems with messages customization from the model.
Thanks,
Igor
Approach 1 - Using unbound
To get rid of the metamorph tags surrounding your model value, try using the unbound option which does exactly that:
Link
Approach 2 - Computing the URL
In the case you need the model property to be bound and reevaluating when the model changes, then a different approach might be better like for example generating the URL in the controller backing up your template.
Assuming your controller is e.g. ApplicationController and the links live in the correspondent application template then you could do the following:
App.ApplicationController = Ember.ObjectController.extend({
url: function() {
var url = this.get('model.url');
var title = this.get('model.title');
// grab here as many properties you need from your model
var href = 'http://someaddres.com?u=%#&title=%#'.fmt(url, title);
return href;
}.property('model')
});
And then use the computed url property like this in your template:
<a {{bind-attr href=url}} target="_blank">Link</a>
Hope it helps.
This actually doesn't work that well since this will open a new browser tab\window instead of the desired popup window you get when using the suggested js code form facebook # https://developers.facebook.com/docs/plugins/share-button/
Unfortunately, you also need to create an 'action' within a Ember.View (for example) that calls window.open(url,"blah","width=300,height=500")
I"m running into an issue when I click on a quicknav, the anchor tag replaces my search parameters in the URL.
'example.com/search?hash=1234' becomes 'example.com/search#FAQ'
instead of 'example.com/search?hash=1234#FAQ'
How do I fix this? Version 1.1.5
HTML anchor tags:
{{page.id}}
I do have HTML5 mode enabled if that makes a difference:
.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
I'm using a bit of a hacky workaround for now:
<a ng-href="{{resultsHash}}#{{page.id}}" ng-repeat="page in results.page">{{page.id}}</a>
And the value of resultsHash
$scope.resultsHash = "?hash=" + data.hash;
So each time they use a quickNav link, the hash will be included in the path. This isn't an ideal solution tho. But it mimics what I want done.