web-dev-qa-db-fra.com

AngularJS passe la chaîne en tant que fonction à utiliser avec ng-click

Je veux assigner une fonction javascript à ng-click dont le nom provient d'un service de repos.

<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
   <a href="{{menu.href}}" data-ng-click="{{menu.javascript}}">{{menu.label}}</a>
</li>

Malheureusement, l'analyseur angularjs lève une exception si on utilise {{}} à l'intérieur de ng-click. J'ai donc essayé plusieurs solutions de contournement comme l'utilisation d'une fonction de rappel

  <a href="{{menu.href}}" data-ng-click="call(menu.javascript)">{{menu.label}}</a>

Mais aucune de mes idées n'a réussi. Comment attribuer un nom de fonction javascript dans ng-lick? Btw. la fonction elle-même fait partie de la portée $.

Edit- Voici le contrôleur:

Le service "$ menu" est simplement une demande de repos. Le résultat de la demande est un objet JSON et ne contient que des valeurs de chaîne. Dans le numéro actuel, le résultat pour menu.javascript est "loginModal ()".

.controller('HeaderController', function($scope, $http, ModalService, $menu, $routeParams) {
    $scope.loginModal = function() {
        console.log("modal", ModalService);
        // Just provide a template url, a controller and call 'showModal'.
        ModalService.showModal({
            templateUrl: "/modals/login.modal.html",
            controller: "LoginController"
        }).then(function(modal) {
            // The modal object has the element built, if this is a bootstrap modal
            // you can call 'modal' to show it, if it's a custom modal just show or hide
            // it as you need to.
            console.log(modal.element);
            modal.element.modal();
            modal.close.then(function(result) {
                console.log(result ? "You said Yes" : "You said No");
            });
        });
    };

    $menu.get($routeParams, function(data){
        $scope.menu = data;
    });
})

Edit 2:

Fait intéressant, lorsque j'utilise {{menu.javascript}}, la chaîne correcte "loginModal ()" est disponible dans le DOM. Mais l'analyseur angulaire s'est arrêté là en raison d'erreurs.

javascripthtmlangularjsangularjs-scopeangularjs-ng-click
14
KIC

Vous pouvez faire quelque chose comme ça 

HTML

  <div ng-controller="TodoCtrl">
      <button ng-click="callFunction('testClick')">CLICK ME</button>
  </div>

Manette

function TodoCtrl($scope) {

    $scope.callFunction = function (name){
        if(angular.isFunction($scope[name]))
           $scope[name]();
    }

    $scope.testClick = function(){
        alert("Called");
    }
}

Travailler Fiddle

J'espère que cela pourrait vous aider. Merci.

27
Pankaj Parkar

Vous pouvez utiliser la notation hashmap pour accéder à la propriété de l'objet 'this' (qui, dans ce cas, est $ scope):

<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
   <a href="{{menu.href}}" data-ng-click="this[menu.javascript]()">{{menu.label}}</a>
</li>
0
Andrey108