13

Desidero assegnare una funzione javascript a ng-clic su quale nome viene fornito da un servizio di assistenza.AngularJS passare la stringa come funzione da utilizzare in ng-click

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

Purtroppo il parser angularjs genera un'eccezione se un uso {{}} all'interno della ng clic. Così ho provato diverse soluzioni alternative come utilizzare una funzione di callback

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

Ma nessuna delle mie idee è riuscita. Come posso assegnare un nome di funzioni javascript in ng-lick? Btw. la funzione stessa è parte di $ scope.

Modifica- Ecco il controllore:

Il servizio "menù $" è semplicemente una richiesta GET riposo. Il risultato della richiesta è un oggetto json e contiene solo valori stringa. Nel numero corrente il risultato per menu.javascript è "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:

È interessante notare che quando uso {{}} menu.javascript quindi la stringa corretta "loginModal()" è disponibile nel DOM. Ma il parser angolare si fermò lì a causa di errori.

+0

Usa semplice data-ng-click = "menu.javascript" – squiroid

+0

basta usare questo senza alcuna parentesi ng-click = "yourFunctionOnScope()" –

+0

sì data-ng-click = "menu.javascript" compila ma non chiama lo script ... – KIC

risposta

24

Si può fare qualcosa di simile

HTML

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

controller

function TodoCtrl($scope) { 

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

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

Working Fiddle

Speranza questo potrebbe aiutarti. Grazie.

+0

Ho provato questo. Purtroppo funziona solo se l'uso utilizza le stringhe fisse. Il che significa che "testClick" non può essere un valore di varibale. – KIC

+0

@KIC nel tuo caso sarebbe 'data-ng-click =" callFunction ('{{menu.javascript}}') "' –

+1

sì, data-ng-click = "callFunction (menu.javascrpt)" funziona, Ho dimenticato di rimuovere il() nella mia risposta di riposo. grazie! – KIC

0

È possibile utilizzare la notazione hashmap accedere alla proprietà di 'questo' oggetto (che, in questo caso, è di $ ambito di applicazione):

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