Winkel-ng-Klick mit Aufruf einer Controller-Funktion funktioniert nicht

76

Ich muss eine Variable an einen anderen Controller übergeben. Ich habe den folgenden Code, der sich auf ListCtrl bezieht:

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

Der Link führt zu einem anderen Controller, ItemCtrl.

Ich möchte eine Variable an die ItemCtrl übergeben. Ich dachte daran, einen Dienst namens SharedProperties zu verwenden:

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

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

Wenn auf den Link geklickt wird, rufe ich ein Winkelklickereignis auf, um die folgende Funktion auszulösen:

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

Der Klick auf ng scheint jedoch den Wert meiner freigegebenen Eigenschaft nicht zu ändern ...

AKTUALISIEREN

Ich habe eine Warnung in die durch ng-click ausgelöste Funktion eingefügt und die Warnung wird ausgelöst, wie es sein sollte.

Wenn ich meine Funktion jedoch so schreibe:

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

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

Wenn ich es mit einem Dummy-Namen (z. B. Metro) außerhalb der Funktion platziere, funktioniert es.

UPDATE 3

Ich habe mehrere Dinge ausprobiert und bin ziemlich sicher, dass das Problem bei dieser Funktion liegt:

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

Haben Sie eine Idee, warum dies geschieht?

angularjs Justin D.
quelle

Antworten:

105

Sie sollten wahrscheinlich die ngHref- Direktive zusammen mit dem ngClick verwenden:

 <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 von Ihnen verwendeten Bibliothek funktioniert, aber Sie können damit zumindest die ngClick-Funktion verknüpfen und verwenden.

** Update **

Hier ist eine Demo des Sets und Sie können mit einem Service gut arbeiten.

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


});

* Bearbeiten *

Bitte lesen Sie https://github.com/centralway/lungo-angular-bridge, in dem erläutert wird, wie Lungo und Angular verwendet werden. Beachten Sie außerdem, dass Sie Ihre freigegebenen Eigenschaften in localstorage und / oder einem Cookie beibehalten müssen, wenn Ihre Seite beim Surfen zu einem anderen Link vollständig neu geladen wird.

lucuma
quelle
Es sieht aus wie mit den beiden ng-refund href, ng-clickausgelöst wird und feuert meine Funktion. Ich habe meine Antwort aktualisiert, um mein Problem besser widerzuspiegeln.
Justin D.
Stellen Sie jetzt eine separate Frage?
Lucuma
Ich habe meinen Plunker mit Ihrem Service modifiziert und es funktioniert gut. Ich vermute, Sie haben ein anderes Problem. Sie sehen den Text der Linkaktualisierung "Formulardienst abrufen" mit dem Wert aus dem Dienst.
Lucuma
Ich sehe, dass es in jsfiddle gut funktioniert. Haben Sie eine Idee, warum es in meiner App nicht funktionieren würde?
Justin D.
Ich habe die Fehlerquelle gefunden. Es kommt von meinem zweiten Controller. Die Methode sharedProperties.getListName () gibt eine leere Zeichenfolge zurück, obwohl der erste Controller die Zeichenfolge in meinem Beispiel auf 'metro' gesetzt hat. Ich habe das Verhalten hier reproduziert. Plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview
Justin D.
4

Verwenden Sie einen Alias, wenn Sie Controller in Ihrer Winkelkonfiguration definieren. Zum Beispiel: HINWEIS: Ich verwende hier TypeScript

Beachten Sie einfach den Controller, er 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 Möglichkeit, es zu verwenden ...

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

Probieren Sie es aus .. Es könnte für Sie funktionieren, wie es für mich funktioniert hat ...;)

Json
quelle
3

Ich gehe davon aus, dass Sie keine Fehler erhalten oder diese erwähnt hätten. Wenn dies der Fall ist, entfernen Sie den hrefAttributwert, damit die Seite nicht weg navigiert, bevor Ihr Code ausgeführt wird. In Angular ist es durchaus akzeptabel, hrefAttribute leer zu lassen.

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

Ich weiß auch nicht, was ich tue data-router, aber wenn Sie immer noch nicht das richtige Ergebnis erzielen, könnte dies der Grund sein.

Terry
quelle
Der Datenrouter ist für Lungo js. Es hat ein eigenes Routing-System. Ich kann die href nicht entfernen, weil dann Lungo nicht weiß, wohin er routen soll ...
Justin D.