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 because 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[edit source]
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, do this in the component HTML: <button yourdirectivename> When you press this, the SomeFunctionToCallThatNeedContextData will be called</button>