Angular ng-click 调用控制器功能不起作用 [英] Angular ng-click with call to a controller function not working
问题描述
我需要将一个变量传递给另一个控制器.我有以下与 ListCtrl 相关的代码:
链接将转到另一个控制器 ItemCtrl.
我想将一个变量传递给 ItemCtrl.我想过使用一个名为 SharedProperties 的服务:
service('sharedProperties', function () {var list_name = '';返回 {获取列表名称:函数(){返回列表名称；},setListName:函数(名称){list_name = 名称；}};});当链接被点击时，我调用一个角度点击事件来触发以下函数:
$scope.changeListName = function(name) {sharedProperties.setListName(name);};然而，ng-click 似乎并没有改变我的共享属性的值...
更新
我在 ng-click 触发的函数中放置了一个警报，并且警报被触发，应该如此.
但是，当我像这样编写函数时:
$scope.changeListName = function(name) {sharedProperties.setListName(name);};它不起作用...它看起来像'sharedProperties.setListName(name);'没有执行...
如果我用一个虚拟名称(例如地铁)把它放在函数之外，它就可以工作..
更新 3
我尝试了多种方法，我非常确信问题出在此功能上:
$scope.changeListName = function(list_name) {sharedProperties.setListName(list_name);};你知道为什么会这样吗?
你可能应该使用 ngHref 指令与 ngClick 一起使用:
<a ng-href='#here' ng-click='go()' >点击我</a>这是一个例子:http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview
<p>你好{{name}}！</p>{{味精}}<a ng-href='#here' ng-click='go()' >点击我</a><div style='height:1000px'><a id='here'></a><h1>这里</h1>var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.go = function() {$scope.msg = '点击';}});
我不知道这是否适用于您正在使用的库，但它至少可以让您链接和使用 ngClick 函数.
** 更新 **
这里是该集合的演示，可以很好地使用服务.
http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope, sharedProperties) {$scope.name = '世界';$scope.go = 函数(项目){sharedProperties.setListName(item);}$scope.getItem = function() {$scope.msg = sharedProperties.getListName();}});app.service('sharedProperties', function () {var list_name = '';返回 {获取列表名称:函数(){返回列表名称；},setListName:函数(名称){list_name = 名称；}};});* 编辑 *
请查看 https://github.com/centralway/lungo-angular-bridge，其中讨论了如何使用 lungo 和 angular.另请注意，如果您的页面在浏览到另一个链接时完全重新加载，则您需要将共享属性保存在 localstorage 和/或 cookie 中.
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?
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.
这篇关于Angular ng-click 调用控制器功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
