Функции угловых и jquery-кликов

Question

Функции угловых и jquery-кликов

0

Таким образом, у меня есть html-код, который использует угловую функцию ng-click

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

И моя функция selectFolder() выглядит так:

$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;
        }
    });
};

Когда я использую эту функцию, мне нужно щелкнуть дважды из-за угловых функций ng-click и $.jQuery.click(). Могу ли я сделать свою функцию такой же, но без функции jquery click?

Nikas Žalias 12 май 2016, в 14:50

Источник

1

Вы можете ... то, что вы делаете, считается плохой практикой, но не смешивайте Angular и jQuery. Причина, по которой это занимает 2 клика, заключается в том, что при первом щелчке вы вызываете свою функцию Angular, которая создает обработчик кликов jQuery. Второй щелчок снова вызывает функцию Angular, но также вызывает обработчик jQuery, поскольку он теперь существует.
tymeJV 12 май 2016, в 12:23
0

Да. Вы уже говорите: «Когда пользователь нажимает на это, сделайте это». Вам не нужно это дважды.
Jeremy Jackson 12 май 2016, в 12:24

Теги:

jquery

angularjs

1 ответ

Ещё вопросы

Вы можете ... то, что вы делаете, считается плохой практикой, но не смешивайте Angular и jQuery. Причина, по которой это занимает 2 клика, заключается в том, что при первом щелчке вы вызываете свою функцию Angular, которая создает обработчик кликов jQuery. Второй щелчок снова вызывает функцию Angular, но также вызывает обработчик jQuery, поскольку он теперь существует.
Да. Вы уже говорите: «Когда пользователь нажимает на это, сделайте это». Вам не нужно это дважды.

tymeJV · Accepted Answer · 2016-05-12T11-22-00.000Z

Вы должны делать это Угловым способом - и это действительно очень просто. Сначала создайте класс с правилами CSS, которые вы применяете выше:

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

Теперь примените этот класс к вашему элементу через ngClass и переменную bool (folder_select)

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

Теперь, когда $scope.folder_select имеет значение true, этот класс применяется. Теперь обновите свой угол:

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