web-dev-qa-db-fra.com

cliquez avec le bouton droit de la souris pour ne pas tirer dans AngularJS alors que l'onclick le fait

J'essaie d'utiliser AngularJS dans mon application et j'ai réussi dans une certaine mesure.

Je suis capable de récupérer des données et de les afficher à l'utilisateur. Et j'ai un bouton dans ng-repeat par lequel je veux poster la demande DELETE. Ci-dessous est mon code qui le fait.

<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>

Il s'agit de la fonction FetchViewData qui récupère les informations et les affiche à l'utilisateur.

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

Les données sont récupérées et correctement affichées.

Mais le code dans ng-click="deleteRecord('{{d['@link'].href}}')" ne se déclenche pas lorsque l'utilisateur clique sur le bouton Supprimer. Dans les outils de développement de Google Chrome, des valeurs valides sont générées pour le code {{d['@link'].href}}, mais le code deleteRecord ne se déclenche pas. De cette question J'ai essayé de supprimer les accolades et d'écrire uniquement d['@link'].href mais cela n'a pas fonctionné pour moi.

Lorsque je remplace ng-click par onclick, la fonction deleteRecord est déclenchée.

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

    $http.delete(docURL);
}

Mais alors je reçois l'erreur ci-dessous.

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

J'utilise jQuery 1.10.2 et AngularJS v1.0.8.

javascriptjqueryangularjs
22
Naveen

FetchViewData ici est un contrôleur et, dans votre code HTML, où vous avez ng-controller = "FetchViewData", vous lui indiquez de rechercher dans le champ de ce contrôleur toutes les méthodes et variables angulaires.

Cela signifie que si vous souhaitez appeler une méthode au clic, elle doit appeler quelque chose attaché à la portée de votre contrôleur.

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

Ici, la fonction existe sur l’étendue, et tout code HTML contenu dans votre contrôleur FetchViewData a accès à cette étendue, et vous devriez pouvoir appeler vos méthodes. 

Cela fonctionne lorsque vous utilisez sur le clic, car votre fonction existe dans l'espace de noms global, c'est-à-dire sur lequel on va cliquer. Angular dépend fortement de la portée pour garder vos espaces de noms propres, il y a beaucoup d'informations ici: https://github.com/angular/angular.js/wiki/Understanding-Scopes

26
B Cotter

Au lieu de cela

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

Essaye ça

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

Vous n'avez pas besoin d'utiliser des accolades ({{}}) dans le ng-click

PRENDRE PLAISIR...

6
Rajsekhar Das
  function deleteRecord(docURL) {
       console.log(docURL);

       $http.delete(docURL);
 }

CA devrait etre

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

         $http.delete(docURL);
}

EDIT: Changer quelque chose en html et contrôleur ....

VOIR LA DÉMO DE TRAVAIL

4
Nitish Kumar

La méthode deleteRecord doit être affectée dans l'étendue actuelle et correcte

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

Une autre possibilité pour laquelle ng-click ne se déclenche pas est que vous appliquez un style CSS de pointer-events:none; à l'élément. J'ai découvert que la classe form-control-feedback de Bootstrap applique ce style. Ainsi, même s’il soulève le z-index de 2 pour que l’élément soit placé devant, il désactive les clics de souris!

Alors faites attention à la manière dont vos frameworks interagissent.

0
Zarepheth

Si vous souhaitez utiliser comme bouton d'envoi, définissez le type sur 'envoyer' comme suit:

<button type="submit" ...
0
frank

Comme mentionné, la fonction doit être créée dans la portée:

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

         $http.delete(docURL);
}

Pour utiliser la fonction, commencez par "{{}}", car vous l'utilisez depuis un ng-repeat. Un autre problème est l'utilisation de l'apostrophe dans votre code, vous avez deux paires l'une dans l'autre ... eh bien je suis sûr que vous avez le problème avec ça. 

Utilisez la fonction comme suit:

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

Bonne chance !

0
Shabi_669