Angular ng-click with call to a controller function not working

I need to pass a variable to another controller. I have the following code which is related to the ListCtrl :

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

The link is going to another controller, ItemCtrl.

I want to pass a variable to the ItemCtrl. I thought of using a service called SharedProperties :

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


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

When the link is clicked, I call an angular click event to trigger the following function :

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

However, the ng-click does not seem to change the value of my shared property...

UPDATE

I put an alert inside the function triggered by ng-click and the alert is triggered, as it should be.

However, when I write my function like this :

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

It doesn't work... it looks like 'sharedProperties.setListName(name);' is not executed...

If I put it outside the function with a dummy name (eg. metro), it works..

UPDATE 3

I tried multiple things and I am pretty confident that the problem is with this function :

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

Do you have any idea why this is happening?

449772 次浏览
小开

I'm going to guess you aren't getting errors or you would've mentioned them. If that's the case, try removing the href attribute value so the page doesn't navigate away before your code is executed. In Angular it's perfectly acceptable to leave href attributes blank.

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

Also I don't know what data-router is doing but if you still aren't getting the proper result, that could be why.

小开
最佳答案

You should probably use the ngHref directive along with the ngClick:

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

Here is an example: 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';
}
});

I don't know if this will work with the library you are using but it will at least let you link and use the ngClick function.

** Update **

Here is a demo of the set and get working fine with a service.

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 *

Please review https://github.com/centralway/lungo-angular-bridge which talks about how to use lungo and angular. Also note that if your page is completely reloading when browsing to another link, you will need to persist your shared properties into localstorage and/or a cookie.

小开

Use alias when defining Controller in your angular configuration. For example: NOTE: I'm using TypeScript here

Just take note of the Controller, it has an alias of 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');
}]);
}

And here's the way to use it...

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

Try it.. It might work for you as it worked for me... ;)


提交答案