No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
ng-click is the angular replacement for | ng-click is the angular replacement for the on-click event. | ||
If you try to use it like below in a simple component you get an error since you cannot bind into javascript - only | If you try to use it like below in a simple component, you get an error since you cannot bind into javascript - only HTML: | ||
... onclick="CallFunction(<nowiki>{{data.SomeValue}}</nowiki>)" .... | ... onclick="CallFunction(<nowiki>{{data.SomeValue}}</nowiki>)" .... | ||
If you try to use it like the below | If you try to use it like the code below, nothing happens - due to the fact that your CallFunction is not part of the scope - it is outside the scope: | ||
... ng-click="CallFunction(data.SomeValue)" .... | ... ng-click="CallFunction(data.SomeValue)" .... | ||
The kosher way is to define a directive ( a directive is a definition that enables you to tie html-elements to javascript-scope-data ) | The kosher way is to define a directive (a directive is a definition that enables you to tie html-elements to javascript-scope-data). | ||
But if you want to solve with minimum effort consider this workaround: | But if you want to solve it with minimum effort, consider this workaround: | ||
...p1="<nowiki>{{data.SomeValue}}</nowiki>" onclick="CallFunction(this.getAttribute('p1'))" .... | ...p1="<nowiki>{{data.SomeValue}}</nowiki>" onclick="CallFunction(this.getAttribute('p1'))" .... | ||
What the above code does: we use angular's ability have bindings in | What the above code does: we use angular's ability to have bindings in HTML - but we use it in an attribute we defined ourselves. Then we use javascript's ability to access that attribute's value and call our function. | ||
==== Doing it the | ==== Doing it the Proper Way ==== | ||
It is easy to declare a directive in | It is easy to declare a directive in Angular and MDriven. Add this to your .js file of the Ext_Component: | ||
function SomeFunctionToCallThatNeedContextData(ev,data) { | function SomeFunctionToCallThatNeedContextData(ev,data) { | ||
var x=data.SomeViewModenColumnName; | var x=data.SomeViewModenColumnName; | ||
Line 35: | Line 35: | ||
InstallTheDirectiveFor_YOURNAME(angular.module(MDrivenAngularAppModule)); | InstallTheDirectiveFor_YOURNAME(angular.module(MDrivenAngularAppModule)); | ||
To make use of the directive, go like this in the component HTML: <nowiki><button yourdirectivename>When you press this the SomeFunctionToCallThatNeedContextData will be called</button></nowiki> | |||
<nowiki><button yourdirectivename>When you press this the SomeFunctionToCallThatNeedContextData will be called</button></nowiki> | |||
[[Category:AngularJS]] | [[Category:AngularJS]] |
Revision as of 06:20, 9 March 2023
ng-click is the angular replacement for the on-click event.
If you try to use it like below in a simple component, you get an error since you cannot bind into javascript - only HTML:
... onclick="CallFunction({{data.SomeValue}})" ....
If you try to use it like the code below, nothing happens - due to the fact that your CallFunction is not part of the scope - it is outside the scope:
... ng-click="CallFunction(data.SomeValue)" ....
The kosher way is to define a directive (a directive is a definition that enables you to tie html-elements to javascript-scope-data).
But if you want to solve it with minimum effort, consider this workaround:
...p1="{{data.SomeValue}}" onclick="CallFunction(this.getAttribute('p1'))" ....
What the above code does: we use angular's ability to have bindings in HTML - but we use it in an attribute we defined ourselves. Then we use javascript's ability to access that attribute's value and call our function.
Doing it the Proper Way
It is easy to declare a directive in Angular and MDriven. Add this to your .js file of the Ext_Component:
function SomeFunctionToCallThatNeedContextData(ev,data) { var x=data.SomeViewModenColumnName; data.Execute("SomeViewModelAction"); } function InstallTheDirectiveFor_YOURNAME(streamingAppController) { streamingAppController.directive('yourdirectivename', ['$document', function ($document) { return { link: function (scope, element, attr) { element[0].addEventListener("click",function(ev) {SomeFunctionToCallThatNeedContextData(ev,scope.data);} ); } }; }]); console.trace("YOURNAME Loaded"); } InstallTheDirectiveFor_YOURNAME(angular.module(MDrivenAngularAppModule));
To make use of the directive, go like this in the component HTML: <button yourdirectivename>When you press this the SomeFunctionToCallThatNeedContextData will be called</button>