BinaryDevelop
  1. ホーム
  2. angularjs

Angularのng-clickでコントローラ関数への呼び出しが機能しない

2023-10-30 21:23:13

質問

ある変数を別のコントローラに渡す必要があります。ListCtrlに関連した以下のようなコードがあります。 

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

リンク先は別のコントローラであるItemCtrlです。

ItemCtrlに変数を渡したい。SharedPropertiesというサービスを使おうと思いました． 

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

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

リンクがクリックされたら、angularのクリックイベントを呼び出して、次の関数をトリガーしています。 

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

しかし、ng-clickは私の共有プロパティの値を変更しないようです...。

UPDATE

ng-clickで起動する関数の中にアラートを入れてみたところ、当然のようにアラートが起動しました。

しかし、このように関数を書くと． 

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

うまくいかない・・・『sharedProperties.setListName(name);』が実行されていないような・・・。

関数の外にダミーの名前(例：metro)を付けると動きますが...。

UPDATE 3

いろいろと試してみましたが、この関数に問題があることは間違いありません。 

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

なぜこのようなことが起こるのか、何か心当たりはありますか？

どのように解決するのですか？

あなたはおそらく ngHref ディレクティブを使うべきです。 

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

以下はその例です。 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';
  }
});

あなたが使っているライブラリでこれが動作するかどうかは分かりませんが、少なくともngClick関数をリンクして使用することができます。

** アップデート **

セットして、サービスでうまく動作するデモを紹介します。

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


});

* 編集

レビュー https://github.com/centralway/lungo-angular-bridge をご覧ください。 また、他のリンクにアクセスしたときにページが完全にリロードされる場合は、共有プロパティをlocalstorageやクッキーに保存する必要があることに注意してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します