Add ng-click like an attribute AngularJS

Question

I'm wondering is a way to add an ng-click as an attribute?

Let's say I want to add ng-click if my <li> has a class someClass:

angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'});

And when <li> has a class anotherClass I want to reset the ng-click:

angular.element(root.querySelector('li.someClass').attr({'ng-click': ''});

But it didn't work.

I can't make it in my HTML:

<li class="someClass" ng-click="someFunc()"> ... </li>
<li class="anotherClass"> ... </li>

because my HTML is generated dynamically by ng-repeat and also there is a directive which make some mess with ng-hide.

The best solution will be with the angular.element but ng-click isn't an attribute right?

(I can debug the code in Visual Studio and when I add ng-click in a way <li ng-click="someFunc()">...</li> I can't find it in the Locals Window in VS)

ng-click isn't a "real" attribute. It is an angular directive. Adding it via angular.element or jquery will not make angular run it. Could you give your ng-repeat and what is wrong with it ? We could fix that instead of trying to do some things in a non-angular way :). — Okazari
– Okazari, Commented Aug 5, 2015 at 13:01

venkat7668 · Accepted Answer · 2015-08-05 13:13:46Z

1

Check the class name in handler function instead reset ng-click

JS

$scope.someFunc = function (e) {

    if(angular.element(e.target).hasClass("someClass")){
        //code goes here
    };
}

HTML

<li class="someClass" ng-click="clickHandler($event)">Button</li>

answered Aug 5, 2015 at 13:13

venkat7668

2,7971 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prototype · Accepted Answer · 2015-08-05 13:07:12Z

0

You can't really toggle ng-click since it's a angular directive but you can add conditions like so:

<li ng-click="someVar === true ? callOnMe() : ''">CLICK ME</li>

Demo fiddle: http://jsfiddle.net/gnrL6cLw/

Note: Change $scope.someVar to be true to see the alert.

answered Aug 5, 2015 at 13:07

prototype

3,3232 gold badges31 silver badges43 bronze badges

Comments

Zac Seth · Accepted Answer · 2015-08-05 13:12:37Z

0

Without seeing your ng-repeat code, it's hard to say - but, if I'm understanding your goal correctly, I think you could use ng-switch with ng-switch-when to achieve the output you want:

<ul ng-repeat="item in items" ng-switch="item.someCondition">
    <li ng-switch-when="true" class="someClass" ng-click="someFunc()">...</li>
    <li ng-switch-when="false" class="anotherClass">...</li>
</ul>

That way it should render the list item you want to display based upon the condition. Of course, item.someCondition doesn't have to be a boolean value - you could match on a string, int, or any other type you like.

answered Aug 5, 2015 at 13:12

Zac Seth

2,7825 gold badges37 silver badges57 bronze badges

Collectives™ on Stack Overflow

Add ng-click like an attribute AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related