Ng-click не стреляет в AngularJS, а onclick делает

Я пытаюсь использовать AngularJS в своем приложении и в некоторой степени добился успеха.

Я могу получить данные и отобразить их пользователю. И у меня есть кнопка в ng-repeat, через которую я хочу отправить запрос DELETE. Ниже мой код, который делает это.

<div class="navbar-collapse collapse">
    <table class="table table-striped" ng-controller="FetchViewData">
        <tr>
            <td>Name</td>
            <td>ID</td>
            <td>Department</td>
            <td></td>
        </tr>
        <tr ng-repeat="d in viewData">
            <td>{{d.EmployeeName}}</td>
            <td>{{d.EmployeeID}}</td>
            <td>{{d.EmployeeDepartment}}</td>
            <td>
                <button class="trashButton" type="button" 
                name="view:_id1:_id2:_id14:_id24:btnDelete" 
                id="view:_id1:_id2:_id14:_id24:btnDelete" 
                ng-click="deleteRecord('{{d['@link'].href}}')">
                <img src="/trashicon.gif"></button>
            </td>
        </tr>
    </table>
</div>

Это функция FetchViewData, которая извлекает информацию и выводит ее пользователю.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
}

Данные извлекаются и отображаются правильно.

Но код в ng-click="deleteRecord('{{d['@link'].href}}')" не срабатывает при нажатии кнопки удаления. В инструментах разработчика Google Chrome я вижу, что допустимые значения генерируются для кода {{d['@link'].href}}, но код deleteRecord не запускается. Из этот вопрос Я попытался удалить фигурные скобки и написать только d['@link'].href, но это не сработало для меня.

Когда я заменяю ng-click на onclick, функция deleteRecord запускается.

function deleteRecord(docURL) {
    console.log(docURL);

    $http.delete(docURL);
}

Но затем я получаю следующую ошибку.

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

Я использую jQuery 1.10.2 и AngularJS v1.0.8.

Ответы

Ответ 1

FetchViewData - это контроллер, а в вашем html, где у вас есть ng-controller = "FetchViewData", вы говорите ему, чтобы он просматривал эту область контроллера для любых методов и переменных angular.

Это означает, что если вы хотите вызвать метод при щелчке, ему необходимо вызвать что-то, прикрепленное к области вашего контроллера.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
    $scope.deleteRecord = function(docURL) {
        console.log(docURL);

        $http.delete(docURL);
    }   
}

Здесь функция существует в области видимости, и любой html, находящийся внутри вашего контроллера FetchViewData, имеет доступ к этой области, и вы должны иметь возможность вызывать свои методы.

Работает, когда вы используете клик, потому что ваша функция существует в глобальном пространстве имен, где будет отображаться щелчок. angular очень сильно зависит от области обзора, чтобы сохранить пространство имен чистым, здесь много информации: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Ответ 2

ВМЕСТО этого

ng-click="deleteRecord('{{d['@link'].href}}')"

ПОПРОБУЙТЕ это

ng-click="deleteRecord(d['@link'].href)"

Вам не нужно использовать фигурные скобки ({{}}) в ng-click

ENJOY...

Ответ 3

  function deleteRecord(docURL) {
       console.log(docURL);

       $http.delete(docURL);
 }

Это должно быть

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

EDIT: изменить что-то в html и контроллере....

СМ. РАБОЧИЙ ДЕМО

Ответ 4

Метод deleteRecord должен быть назначен в текущей и правильной области

$scope.deleteRecord = function(){
....

Ответ 5

Как уже упоминалось, функция должна создаваться внутри области действия:

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

Чтобы использовать эту функцию, сначала снимите "{{}}", так как вы используете ее изнутри ng-repeat. Другая проблема заключается в использовании апострофа в вашем коде, у вас есть две пары одна внутри другой... ну, я уверен, что у вас есть проблема с этим.

Используйте такую функцию:

ng-click="deleteRecord(d['@link'].href)"

Удачи!

Ответ 6

Если вы хотите использовать в качестве кнопки отправки, установите тип "отправить" как:

<button type="submit" ...

Ответ 7

Другая возможность, почему ng-click не срабатывает, заключается в том, что вы применяете стиль CSS pointer-events:none; к элементу. Я обнаружил, что класс Bootstrap form-control-feedback применяет этот стиль. Таким образом, даже если он поднимает значение z-index на 2, так что элемент перед щелчком мыши отключает щелчки мыши!

Поэтому будьте осторожны, как взаимодействуют ваши фреймворки.