2013-07-03 13 views
69

別のコントローラに変数を渡す必要があります。私は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; 
     } 
    }; 
}); 

リンクをクリックすると、私は次の関数トリガするために、角クリックイベントを呼び出します。

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

をしかし、NG-クリックはいないようです私の共有プロパティの値を変更するには...

UPDATE

私はFの内側に警告を置きますng-clickでトリガされたunctionはアラートがトリガされます。

しかし、私はこのように私の関数を書くとき:

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

それは動作しません...それがどのように見える 'sharedProperties.setListName(名);'私はダミーの名前(例えば地下鉄)、それが動作して関数の外に置いた場合は3

UPDATE .. ...

実行されていない私は、複数のものを試してみましたが、私はこの問題がこの関数であることはかなり確信しています。

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

これはなぜ起こっているのですか?

答えて

96

あなたはおそらくngClickとともに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を確認してください。また、別のリンクを参照するときにページが完全にリロードされている場合は、共有プロパティをローカルストレージおよび/またはクッキーに保存する必要があります。

+0

ng-refとhrefの両方のように見えますが、ng-clickが起動され、自分の機能が起動します。私は私の問題をよりよく反映するように答えを更新しました。 –

+0

今、別の質問をしていますか? – lucuma

+0

いいえ、私の問題は解決していません。 –

3

私はあなたが間違いをしていないか、あなたがそれらを言及したと思います。そのような場合は、href属性値を削除して、コードが実行される前にページが移動しないようにしてください。 Angularでは、hrefの属性を空白のままにしておきます。

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

また、私はdata-routerが何をしているのか知らないが、あなたはまだ正しい結果を取得していない場合、その理由である可能性があります。

+0

データ-ルータがありますLungo jsのために。それは独自のルーティングシステムを持っています。 lungoはどこにルーティングするのかわからないので、hrefを削除することはできません。 –

4

角度設定でコントローラを定義するときにエイリアスを使用します。例: 注:ここでタイプスクリプトを使用しています

コントローラに注目するだけで、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'); 
    }]); 
} 

そして、ここでそれを使用する方法です...

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

それは私のために働いたとして...それはあなたのために働くかもしれない、それを試してみてください...;)