2013-07-03 6 views
69

Devo passare una variabile a un altro controller. Ho il seguente codice che è correlato al ListCtrl:Angolare ng-clic con chiamata a una funzione del controller non funzionante

<a href="#items" data-router="article" ng-click="changeListName('metro')"> 

Il collegamento sta andando a un altro controller, ItemCtrl.

Voglio passare una variabile a ItemCtrl. Ho pensato di utilizzare un servizio chiamato SharedProperties:

service('sharedProperties', function() { 
    var list_name = ''; 

    return { 
     getListName: function() { 
      return list_name; 
     }, 
     setListName: function(name) { 
      list_name = name; 
     } 
    }; 
}); 

Quando il link viene cliccato, io chiamo un evento click angolare per attivare la seguente funzione:

$scope.changeListName = function(name) { 
    sharedProperties.setListName(name); 
}; 

Tuttavia, il ng-click non sembra per modificare il valore della mia proprietà condivisa ...

UPDATE

ho messo un avviso all'interno del f unzione attivata da ng-clic e l'avviso viene attivato, come dovrebbe essere.

Tuttavia, quando scrivo la mia funzione come questa:

$scope.changeListName = function(name) { 
    sharedProperties.setListName(name); 
}; 

Non funziona ... sembra 'sharedProperties.setListName (nome);' non viene eseguita ...

Se lo metto fuori della funzione con un nome fittizio (ad es. metro), funziona ..

UPDATE 3

ho provato più cose e io sono abbastanza fiducioso che il problema è con questa funzione:

$scope.changeListName = function(list_name) { 
    sharedProperties.setListName(list_name); 
}; 

Avete qualche idea del perché questo sta accadendo?

risposta

96

Probabilmente si dovrebbe utilizzare la direttiva ngHref insieme al ngClick:

<a ng-href='#here' ng-click='go()' >click me</a> 

Ecco un esempio: http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    {{msg}} 
    <a ng-href='#here' ng-click='go()' >click me</a> 
    <div style='height:1000px'> 

     <a id='here'></a> 

    </div> 
    <h1>here</h1> 
    </body> 

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.go = function() { 

    $scope.msg = 'clicked'; 
    } 
}); 

Non so se questo funzionerà con la libreria si è usando ma almeno ti permetterà di collegare e usare la funzione ngClick.

** Aggiornamento **

Ecco una demo del set e far funzionare bene con un servizio.

http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, sharedProperties) { 
    $scope.name = 'World'; 

    $scope.go = function(item) { 
    sharedProperties.setListName(item); 


    } 

    $scope.getItem = function() { 

    $scope.msg = sharedProperties.getListName(); 
    } 
}); 

app.service('sharedProperties', function() { 
    var list_name = ''; 

    return { 

     getListName: function() { 
      return list_name; 
     }, 
     setListName: function(name) { 
      list_name = name; 
     } 
    }; 


}); 

* Edit *

Si prega di rivedere https://github.com/centralway/lungo-angular-bridge che parla di come utilizzare Lungo e angolare. Si noti inoltre che se la pagina si sta ricaricando completamente durante la navigazione su un altro collegamento, sarà necessario mantenere le proprietà condivise in localstorage e/o un cookie.

+0

Sembra sia con 'ng-ref' che' href', 'ng-click' viene attivato e attiva la mia funzione. Ho aggiornato la mia risposta per riflettere meglio il mio problema. –

+0

Stai facendo una domanda separata adesso? – lucuma

+0

No, il mio problema non è risolto. –

3

Ho intenzione di indovinare che non ricevi errori o che li avresti menzionati. In questo caso, prova a rimuovere il valore dell'attributo href in modo che la pagina non si allontani prima dell'esecuzione del codice. In Angular è perfettamente accettabile lasciare gli attributi href vuoti.

<a href="" data-router="article" ng-click="changeListName('metro')"> 

Anche io non so che cosa data-router sta facendo, ma se ancora non si ottiene il risultato corretto, che potrebbe essere il motivo.

+0

Data-router è per Lungo js. Ha un proprio sistema di routing. Non riesco a rimuovere l'href perché quindi lungo non saprà dove instradare ... –

4

Utilizzare l'alias quando si definisce il controller nella configurazione angolare. Ad esempio: NOTA: Sto usando TypeScript qui

Basta prendere nota del controller, ha un alias di homeCtrl.

module MongoAngular { 
    var app = angular.module('mongoAngular', ['ngResource', 'ngRoute','restangular']); 

    app.config([ 
     '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => { 
      $routeProvider 
       .when('/Home', { 
        templateUrl: '/PartialViews/Home/home.html', 
        controller: 'HomeController as homeCtrl' 
       }) 
       .otherwise({ redirectTo: '/Home' }); 
     }]) 
     .config(['RestangularProvider', (restangularProvider: restangular.IProvider) => { 
     restangularProvider.setBaseUrl('/api'); 
    }]); 
} 

Ed ecco il modo di usarlo ...

ng-click="homeCtrl.addCustomer(customer)" 

Provalo .. potrebbe funzionare per voi come ha funzionato per me ...;)

Problemi correlati