2013-07-03 12 views
69

Muszę przekazać zmienną do innego kontrolera. Mam następujący kod związany z ListCtrl:Kątowe kliknięcie z wywołaniem funkcji kontrolera nie działa

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

Łącze przechodzi do innego kontrolera, ItemCtrl.

Chcę przekazać zmienną do ItemCtrl. Myślałem o użyciu usługę o nazwie SharedProperties:

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

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

Po kliknięciu linku, wzywam kątowego kliknij zdarzenie wywoła następującą funkcję:

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

Jednak ng-click nie wydaje aby zmienić wartość z moim osiedlu ...

UPDATE

kładę alert wewnątrz f Nałożenie uruchomione przez ng-kliknięcie powoduje uruchomienie alarmu, tak jak powinno być.

Jednak, gdy piszę funkcję tak:

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

To nie działa ... to wygląda 'sharedProperties.setListName (nazwa);' nie jest wykonywany ...

Jeśli mogę umieścić go na zewnątrz funkcji z manekina nazwy (np. metra), to działa ..

UPDATE 3

Próbowałem wielu rzeczy i jestem całkiem pewni, że problem dotyczy tej funkcji:

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

Czy masz pojęcie, dlaczego tak się dzieje?

Odpowiedz

96

Powinieneś raczej użyć dyrektywy ngHref wraz z ngClick:

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

Oto przykład: 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'; 
    } 
}); 

Nie wiem, czy to będzie działać z biblioteką jesteś używając, ale przynajmniej pozwoli ci połączyć i użyć funkcji ngClick.

** Aktualizacja **

Oto demo zestawu i dostać pracę w porządku z serwisu.

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 *

Zapoznaj https://github.com/centralway/lungo-angular-bridge który mówi o tym, jak używać Lungo i kanciasty. Pamiętaj również, że jeśli Twoja strona przeładowuje się całkowicie podczas przeglądania innego linku, będziesz musiał utracić swoje współdzielone właściwości w localstorage i/lub pliku cookie.

+0

Wygląda na to, że zarówno z 'ng-ref' i' href', 'ng-click' jest wyzwalane i uruchamia moją funkcję. Zaktualizowałem swoją odpowiedź, aby lepiej odzwierciedlić mój problem. –

+0

Czy zadajesz teraz osobne pytanie? – lucuma

+0

Nie, mój problem nie został rozwiązany. –

3

Zamierzam zgadnąć, że nie dostaniesz błędów lub wspomniałbyś o nich. W takim przypadku spróbuj usunąć wartość atrybutu href, aby strona nie nawigowała poza kodem przed wykonaniem kodu. W Angularu całkowicie dopuszczalne jest pozostawienie atrybutów href pustych.

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

Również nie wiem co data-router robi, ale jeśli nadal nie otrzymują właściwego rezultatu, który mógłby być dlaczego.

+0

Danych router dla Lungo js. Ma własny system trasowania. Nie mogę usunąć href, ponieważ wtedy lungo nie będzie wiedział, dokąd się udać ... –

4

Użyj aliasu podczas definiowania kontrolera w konfiguracji kątowej. Na przykład: UWAGA: Używam TypeScript tutaj

Wystarczy wziąć pod uwagę kontroler, ma on alias 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'); 
    }]); 
} 

A oto sposób z niego korzystać ...

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

Wypróbuj .. To może pracować dla Ciebie, ponieważ pracował dla mnie ...;)

Powiązane problemy