ng-click Vs click event - javascript

I am working on a website based on angular js.
Currently, I have written about 5000 line code in angular js.
So I have to make some changes without touching my angular js.
I want something like this:
$(document).on('click','#buttonid',function(){
//performing some necessary task then call ng-click method
ngclickmethod();
});
HTML Code:
<a ng-click="ngclickmethod()" id="buttonid">
Please advise how can I achieve that.
Many Thanks

So it looks like you are trying to call an angular function outside of angular. Try this..
angular.element(document.getElementById('yourControllerElementID')).scope().ngclickmethod();
this will call the method you want. Be sure the controller element ID is the controller that contains the ngclickmethod function

Related

How can I replace PrimeFaces DataTable pagination with custom buttons?

I want to replace the standard DataTable pagination buttons with a custom JSF h:outputtext.
This is the current impl:
Now I need to change the button completely. The problem is that I'm using JSF messages.properties file because of different languages.
This is how it should looks like:
So I first thought that I can replace it with JS but this can't work because of different languages. So when a user is a chinese person, the text must change from "Next" to "下一個" and this can't be done via a JS script because the DOM is already loaded and JS has no JSF functionality.
This is the next button from the DOM:
<span class="ui-icon ui-icon-seek-next">N</span>
So I need to do something like this:
<span>#{msgs.nextMessage} →</span>
But how?
You should have multiple messages.properties files, each for your different language right? An example below showing how I'd make an app that deals with English and Spainish.
You'll have a message.properties with: greeting = Hello!
You'll then want a message_sp.properties with: greeting = Hola!
You will need to update you faces-config.xml you'll have want to make sure you have following.
<application>
<locale-config>
<default-locale>en_GB</default-locale>
<supported-locale>sp</supported-locale>
</locale-config>
<resource-bundle>
<base-name>uk.police.ecis.message</base-name>
<var>message</var>
</resource-bundle>
</application>
Then in your JSF file, write something like this:
<span>#{message.greeting} →</span>
It'll figure out the rest for you. Internationalization within JSF is what you are trying to do. Hope that helps.

How to execute javascript/html using angular scope variable

Want to submit form dynamically though scope variable.But it is not working. Even, simple example as below that alert is also not executing.
$scope.sctext = $sce.trustAsHtml('<div>text<script type="javascript">alert('working'); other scripts</script></div>');
Html:
<div>{{sctext}}</div>
Is it possible to execute javascript & html like above?
Have solved by - directive - link (element) { element.append(script) }

Call Angular2 component function from HTML by clicking on a button

I am pretty much new in TypeScript and Angular2. I have a problem when I want to call a component function by clicking on the button in HTML.
If I use **onclick="locateHotelOnMap()"** on HTML button element I get this error:
ReferenceError: locateHotelOnMap is not defined
at HTMLButtonElement.onclick
Can someone help me with this?
In Angular1, I've called my controller funtions using directive ng-click.
How should I do it now?
Thanks in advance.
you need to call the function like this (click)="componentFunctionName()" See below example.
<button (click)="locateHotelOnMap()">Click Me!</button>
In Angular 2, the events can be called using () around normal javascript handlers like
<button (click)="locateHotelOnMap()">Hello World</button>

After using $sce.trustAsHtml, ng-click not working

I am trying to print to the screen custom html using angular. I am using $sce.trustAsHtml in combination with ng-bind-html to accomplish this. The goal is not only to be able to print this custom html, but that it will retain directives such as ng-click and they will be usuable. Examples I have seen in articles such as follows are promising:
AngularJS render HTML within double curly brace notation
However in my implementation I find that although the html renders correctly including references to ng-click, the directive doesn't seem to work anymore when trying to click on the link I am using it on; here is some sample code:
$scope.htmlExpression = $sce.trustAsHtml("<a ng-click='test();'>Click Me</a>");
$scope.test = function() {
console.log('Hello World!');
}
<div>
<p ng-bind-html="htmlExpression"></p>
</div>
As everything renders fine and nothing appears lost in translation when analyzing the source; I am left feeling as if I have left something out. Any help is appreciated.
Use https://docs.angularjs.org/api/ngSanitize and bind the html. If this does not work, $digest to reboot the digest cycle.

AngularJS switch controller based on variable

I want to do something similar to a $routeProvider .when but instead of using URL I would like to load an HTML file and a new controller based on a variable change.
Assume I use a $http polling and the poll has a variable that changes, and I would like to change the Controller and template based on that. What is the best strategy for this
I'm new to this so please excuse if this is a stupid question.
Thank you so much.
The first thing that comes to mind is you could do something like this
<div>
<directive1 ng-if="switch_var == val_1"></directive1>
<directive2 ng-if="switch_var == val_2"></directive2>
...
</div>
Create a directive for each template/controller combo you want, and then choose which directive to show based on your poll variable.
Alternative to using a bunch of ng-if's, use ng-switch - http://docs.angularjs.org/api/ng/directive/ngSwitch

Categories

Resources