-1

I'm having a problem while trying to render another HTML with Directives in AngularJS.

if the template HTML is without events, It works just fine :

<button id="{{item.id}}">Some Button !</button>

would be rendered to :

<button id="123">Some Button !</button>

but if the template HTML has some events, the angular expression wouldn't work :

<button id="{{item.id}}" onmouseover="doSomething({{item.id}})">Some Button !</button>

would be rendered to :

<button id="123" onmouseover="doSomething({{item.id}}">Some Button !</button>

I tried to import another HTML and change the contents dynamically using both Directives & ngInclude, but both of them react the same way when they try to include the template HTML.

This problem only occures in events (onfocus,onmouseover,onclick) and any other part of the html is successfully rendered.

I want to Import an HTML and I want the expressions to be completely replaced by the data. one of the reasons for doing this is that we have a lot of custom JSP Tag Libraries which we want to convert to AngularJS Directives. in these tags there are lots of events, for example our own custom "AutoComplete" Tag has more than 10 events and they could be easily converted to a directive only if angular would render our expressions inside those events (But It's NOT !)

Thanks

Cypher
  • 2,374
  • 4
  • 24
  • 36
  • 1
    You should really be using the angular equivalents like `ng-mouseover`. Also whats the intention with this jQuery selector in the attribute? This is really not the angular way of doing it and you will have a very hard time with this... – Marcel Gwerder Dec 27 '14 at 12:55
  • You're right... I should be using angular equivalents... but I already have functions like "doSomething()" written in another JS file and they're not in my scope... what should I do ? reWrite all of them to work in angular ? Can't I somehow make them work just like the examples above ? by the way, I removed the jQuery selector... thanks for mentioning it... – Cypher Dec 27 '14 at 13:06
  • Try `doSomething(item.id)` instead but if the function is not in the scope it won't work... If the functions are global you can try `$window.doSomething(item.id)`. And I don't think that there is anything that prevents you from using `ng-mouseover`. – Marcel Gwerder Dec 27 '14 at 13:08

1 Answers1

0

the correct sintax for angular mouseover is:

<button id="{{item.id}}" ng-mouseover="doSomething(item.id)">Some Button !</button>

This piece of code implies that you already defined a $scope.doSomething() and you are using for example ng-repeat="item in myArrayOrObject" to print this button on the page.

For more details look at the doc please: https://docs.angularjs.org/api/ng/directive/ngMouseover

itsme
  • 48,972
  • 96
  • 224
  • 345
  • Yes ! but the thing is that I only want "doSomething({{item.id}})" to be replaced to "doSomething(123)" ! I'm including another HTML but I want all the angular expressions inside it to be replaced by real data and in the end no other expressions would be left over... is this even possible or no matter what, I have to stick to using "ng-mouseover" ? – Cypher Dec 28 '14 at 04:30
  • @Cypher i don't think its possible to use onmouseover="" afaik you need ng-mouseover="" which is exactly the same of onmouseover="", have you tried? – itsme Dec 28 '14 at 08:19