Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
868 views
in Technique[技术] by (71.8m points)

angularjs - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...