I am new to AngularJs. I have written a custom directive in AngularJs. The link for the same can be found here: Link to plunkr. I have added the alerts on loading of the page and on clicking the individual links.
My specific question is why is the alert message "Loaded the custom directive." being triggered after the link is clicked. I was under the impression that The message will be called only on document load and not on every time the links are clicked. Am I doing an mistake or this is the intended behavior.
Please let me know where I am going wrong.
you are changing the page when you click the anchor
<a href="#" class="ops-block">
simply delete the hash.
Is an empty href valid?
Related
I some links in my application which I want to track the click on those links with the help of GTM. Imagine I have a link to download page like this
<a ui-sref="main.download">Download</a>
I create a tag of type 'Universial Google Analytics' for this click named MainDownloadLink.
How should I define a trigger to fire this tag when that link is clicked? Also note that I don't want to use angularitics library. Imagine that I have no control over the source code. just GTM panel.
I define a trigger of type Clicks-Just Link and I am confused for the condition when this event should be fired.
any help is welcomed.
You must make sure that "link validation" is disabled (since GTM does not consider links without href to be valid).
As long as your links are actually named "Download" it probably would be easiest to use the built-in "click text" variable and set a filter "if click text equals download" on your link trigger.
Else you might want to try to access the "main.download" attribute. The built-in click element variable returns the clicked DOM element, so you'd create a custom variable
function() {
return {{Click Element}}.getAttribute('ui.sref');
}
and then test in your trigger if "{{your custom js var}} equals main.download".
Untested, but basically this should work.
I have an ionic app that has a search template that has a form where you can query posts by keyword. I also have a service that returns the post(s) as a list on another view. All that is working well.
My search controller upon submitting the search form uses:
$state.go('app.search.results', {'searchId': hash});
so that I can have a unique url for that search. I needed this unique url to implement 'back' functionality so that if a user clicks on one of the posts in the list, after viewing the post if they decide to click back, they would get to see the results of the search still (by default they would be returned to the search form without any results anymore).
To allow for a back to search results I implemented a custom back button function and put it on the ionic back button element like this:
<ion-nav-back-button ng-click="goBack()">
and then setup a the custom function:
$scope.goBack = function() {
$window.history.back();
}
All of this works well, I can go back to search results and see them, essentially very much like normal browser back functionality.
Problem for me is that when I have gone all the way 'back' via the back button, my initial state contains the 'Back' button and clicking it does not go anywhere and the 'Back' button still shows. Ionic does pretty good about hiding the back button when it shouldn't be there but in this case not so. Any ideas for how to check when history is exhausted and hiding the back button conditionally would be appreciated.
EDIT:
Here is a jsFiddle ; Note: open fiddle in a new, separate tab to see back button issue. FYI Search is in the menu.
One of the few qualms I have with Ionic is their "smart" navigation. I have run into a lot of problems with this myself. My solution was to create a back button of my own, this back button stores previous states and their params so you can go back and not lose search results for example with your scenario.
This component gives you both a back button and breadcrumbs to use (or you can just use back button)
It is open source and feel free to use it!
jscBreadcrumbs
Strange Milk - Breadcrumbs Post
Here is your jsFiddle with the jscBreadcrumbs implemented and working:
jsFiddle
jscbreadcrumbs
You use $window.history.back(), I think you should use $ionicHistory.goBack(); instead. It can control the history and view and state in the ionic way.
I am using angularjs framework. I have ng-grid having a column containing link text. On that link click, I want to navigate to different page within the same application. I wanted to pass some parameters to another page, so I used ng-click and then method name. So, my code is like this:
<div class="ngCellText"><a data-ng-click="methodName(parameters)"> Go to Page2 </a>
Inside method:
document.location.href = '/Home/page2/
I used target=_blank but it did not work. Any suggestions ?
Thanks.
You need to use window.open method
$window.open('/Home/page2/');
I am trying to build a set of dynamic tabsets with dynamic content,
http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview
1) Clicking on Dashboard opens a new tab with directive
When I provide the content of a as the directive, this gets rendered as a string.
I've tried to use the html bind unsafe and $compile functions to make this run as an Angular component - but haven't be able to
2) Click on menu [Project Management-> Project] shows a list of Sites, on clicking of which I need to open another tab passing a parameter (Proj-ID or Site-Id)
The idea is to call a function on click of the Site Name, I'll open a new tab with content as a directive
But since I am stuck with the previous problem, I am not able to do this
Is this the right way of passing params to the directive.
Right now, the plunkr tries to o/p the tab content as a file, a string and compile - with no success
[I've revised this question with relevant details from a prev question]
SOLUTION FOUND FOR #1:
For some reason ng-bind-html-unsafe doesn't work with Angular Elements.
I had to do create a compile directive http://docs.angularjs.org/api/ng.$compile, based on info I found here on STO
In tabs-directive.html, you can definitely use ngBindHtmlUnsafe. Make sure don't put {{}} around the variable.
String: <div ng-bind-html-unsafe="tab.content"></div>
I'm trying to use the jQuery UI Tabs Ajax to load some tabs content via Ajax. Everything works, content is loaded and everything, but the problem I'm having is this:
Let's say I have the following tab in a cakePHP view file:
<ul>
<li>Tabs 1</li>
</ul>
As you can see, the href attibute of my a element points to a controller action (controller => my_controller and action => my_action) in this case. The problem I'm having is that, when I first load the page, the action my_action is actually executed BEFORE I even click on the tab. How do I prevent this from happening? Obviously, I want my_action to be called only when I click on the tabs.
Any help please
Thank you
Can you paste my_action from my_controller, and app_controller beforeRender function? I try an answer without a partial code from your app
I think is a render problem.. Or check you app_controller (beforeRender) ...
First of all, in the controller, you need $this->layout = 'ajax';
Second, in the app_controller, don't load the layout because it stop the ajax. (or you can "protect" your layout from your app_controller trough a condition)