Angular and jquery click functions

Question

So I have an html code that uses angular's ng-click function

<div class="folder_icon" ng-click="selectFolder()">.....

And my selectFolder() function looks like this:

$scope.selectFolder = function () {
    $(".folder_icon").click(function () {
        if ($scope.folder_select == false) {
            $(this).parent().closest('div[class^="folder_nr_"]').css({
                'border': 'solid',
                'border-width': '1px',
                'border-color': '#ff7d43',
                'box-shadow': '0 0 20px #ff7d43'
            });
            $scope.folder_select = true;

        }
        else {
            $(this).parent().closest('div[class^="folder_nr_"]').css({
                'border': '',
                'border-width': '',
                'border-color': '',
                'box-shadow': ''
            });
            $scope.folder_select = false;
        }
    });
};

When I use this function I need to click twice because of angular ng-click and $.jQuery.click() functions. Can I make my function same but without jquery click function?

You can... what you're doing is considered bad practice tho - dont mix Angular and jQuery. The reason it takes 2 clicks is because on the first click you call your Angular function, which creates the jQuery click handler. The second click again calls the Angular function - but also calls the jQuery handler since it now exists. — tymeJV
– tymeJV, Commented May 12, 2016 at 12:23
Yes. You're already saying "when the user clicks this, do this." You don't need it twice. — Jeremy Jackson
– Jeremy Jackson, Commented May 12, 2016 at 12:24

tymeJV · Accepted Answer · 2016-05-12 12:27:40Z

2

You should be doing this the Angular way - and it's really quite simple. First, make a class with your CSS rules you're applying above:

.myClass {
    border: solid
    border-width: 1px
    border-color: #ff7d43
    box-shadow: 0 0 20px #ff7d43
}

Now, apply this class to your element via ngClass and a bool variable (folder_select)

<div ng-class="{'myClass': folder_select}"></div>

Now, when $scope.folder_select is true, this class is applied. Now update your Angular:

$scope.selectFolder = function () {
    $scope.folder_select = !$scope.folder_select;
}

answered May 12, 2016 at 12:27

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Angular and jquery click functions

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related