web-dev-qa-db-ja.com

Angular-jsディレクティブ内で関数を定義する方法

ブートストラップのドロップダウン要素を使用してユーザーを選択するためのディレクティブを作成しました。次のように。

Javascript

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
        });
    };
});

sers_dropdown.html

<div class="btn-group pull-right" >
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="">
        Select User
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu pull-right align-left" role="menu" aria-labelledby="dropdownMenu">
        <li ng-repeat = "userList in userLists"><a ng-click="getUserDetails('{{userList.SessionId}}')" style="cursor:pointer">{{userList.UserPartyName}}</a></li>
        <li ng-hide="userLists" style="cursor:pointer"><a>No Users</a></li>
    </ul>
</div>

リストからユーザーをクリックするときに呼び出される関数getUserDetailsを作成する必要があります。私の質問は、ディレクティブ自体の中でこの関数を定義する方法ですか？コントローラに書いてみました。しかし、問題は私がいくつかのコントローラーを持っていることです。すべてのコントローラーで同じ関数を作成することはお勧めできません。すべてのコントローラーに共通の関数、つまりディレクティブの内部を記述できればよいでしょう。良い解決策があれば、教えてください。

変形

ディレクティブのjsを次のように変更しました

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
            $scope.getUserDetails = function(user_id){
                console.log(user_id);
            }
        }
    };
});

このため、コンソールで{{userList.SessionId}}として結果を取得しています。そのための値ではありません。しかし、私が調べたとき、関数は期待値を渡しています。 enter image description here

では、なぜ期待値がその関数の内部に入っていないのでしょうか。

解決した

ディレクティブhtml tamplateを変更することで問題を解決しました。 'と{{を次のように削除しました。

ng-click="getUserDetails(userList.SessionId)"
javascriptfunctionangularjsangularjs-directive
13
Sajith

リンクディレクティブ関数はjs関数であり、その中で何でも実行できます

app.directive('usersDropdown', function(ConfigService,$http) {
    return {
        scope : {},
        templateUrl: 'app/views/users_dropdown.html',
        link: function($scope, element, attrs) {
            $scope.somefunction = function(a) {
                // Do some stuff
            }
        }
     }; 
});

また、ディレクティブの外部からこの関数にアクセスできないようにする場合は、分離スコープを使用して実行する必要があります。

23
icanbeacoder

アプリケーションのさまざまな場所で関数またはデータ変数が必要な場合は、ロジックの一部を service に移動することをお勧めします。

たとえば、user serviceは、ユーザー関連の情報とメソッドへのアプリケーション全体のアクセスを提供する必要があります。

3
Wottensprels