2013-07-03 10 views
69

Ich muss eine Variable an einen anderen Controller übergeben. Ich habe den folgenden Code, der den ListCtrl verwendet ist:Angular ng-click mit Aufruf einer Controller-Funktion funktioniert nicht

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

Die Verbindung zu einem anderen Controller wird, ItemCtrl.

Ich möchte eine Variable an die ItemCtrl übergeben. Ich dachte, ein Dienst namens SharedProperties der Verwendung:

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

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

Wenn der Link angeklickt wird, nenne ich einen Winkel Click-Ereignis die folgende Funktion auslösen:

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

jedoch die ng-Klick scheint nicht den Wert meiner gemeinsamen Grundstück ...

UPDATE

ich in der f einen Alarm setzen sich ändern wird durch ng-click ausgelöst und der Alarm wird ausgelöst, wie es sein sollte.

Allerdings, wenn ich meine Funktion wie folgt schreiben:

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

Es funktioniert nicht ... es sieht aus wie 'sharedProperties.setListName (name);' nicht ausgeführt ...

ist, wenn ich es außerhalb der Funktion mit einem Dummy-Namen setzen (z. B. U-Bahn), es funktioniert ..

UPDATE 3

versuchte ich mehrere Dinge, und ich bin ziemlich sicher, dass das Problem mit dieser Funktion ist:

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

Haben Sie eine Idee, warum das passiert?

Antwort

96

Sie sollten wahrscheinlich verwenden, um die ngHref Richtlinie zusammen mit dem ngClick:

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

Hier ist ein Beispiel: 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'; 
    } 
}); 

Ich weiß nicht, ob dies mit der Bibliothek arbeiten Sie Verwendung, aber es wird zumindest lassen Sie verknüpfen und verwenden Sie die ngClick-Funktion.

** Update **

Hier ist eine Demo des Satzes und erhalten mit einem Service funktioniert gut.

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 *

Bitte https://github.com/centralway/lungo-angular-bridge überprüfen, die darüber spricht, wie lungo und Winkel zu verwenden. Beachten Sie außerdem, dass wenn Ihre Seite beim Browsen zu einem anderen Link vollständig neu geladen wird, Sie Ihre geteilten Eigenschaften im lokalen Speicher und/oder einem Cookie beibehalten müssen.

+0

Es sieht so aus, als ob sowohl 'ng-ref' als auch' href' 'ng-click' ausgelöst werden und meine Funktion auslöst. Ich habe meine Antwort aktualisiert, um mein Problem besser widerzuspiegeln. –

+0

Stellen Sie jetzt eine separate Frage? – lucuma

+0

Nein, mein Problem ist nicht gelöst. –

3

Ich gehe davon aus, dass Sie keine Fehler bekommen, oder Sie hätten sie erwähnt. Wenn das der Fall ist, versuchen Sie, den href-Attributwert zu entfernen, damit die Seite nicht vor dem Ausführen des Codes navigiert. In Angular ist es vollkommen akzeptabel, href Attribute leer zu lassen.

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

Auch weiß ich nicht, was data-router tut, aber wenn Sie noch nicht das richtige Ergebnis zu erzielen sind, dass, warum sein könnte.

+0

Daten-Router für Lungo js. Es hat sein eigenes Routing-System. Ich kann die href nicht entfernen, da lunge dann nicht weiß, wo ich routen soll ... –

4

Verwenden Sie Alias ​​beim Definieren des Controllers in Ihrer Winkelkonfiguration. Zum Beispiel: HINWEIS: Ich verwende TypeScript hier

Beachten Sie nur den Controller, es hat einen Alias ​​von 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'); 
    }]); 
} 

Und hier ist die Art und Weise, es zu benutzen ...

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

Probieren Sie es .. Es könnte für Sie arbeiten, wie es für mich gearbeitet ...;)

Verwandte Themen