2

ディレクティブとそのスコープの操作に問題があります。サイトのすべてのメンバーを取得するためのディレクティブを作成し、次のように div に配置しました。

EngagementApp.directive('siteMembers', ['$compile', 'Request',
function($compile, Request) {

    return {
        restrict : 'A',
        scope : false,
        template : '<h4>Members {{name}}</h4><span class="view-all"><a href="/members">View all</a></span><ul><li ng-repeat="user in users"><a profile-modal="{{user.user_name}}" href="{{site_url}}{{user.user_name}}"><img src="{{site_url}}users/profileimage/{{user.user_id}}"></a></li></ul>',
        link : function(scope, element, attrs) {
            scope.site_url = main_site_url;

            Request.get({
                url: 'users',
                data : {
                    fields : 'user_id, user_name',
                    conditions : {customer_id : current_site_id},
                    join : ['customer_users']
                },
                success: function (response) {
                    console.log(response);
                    scope.users = response;
                }
            });


        }
    };
}]);

これはまったく問題なく動作します。これで、クリックしたときにユーザーのモーダルを設定する別のディレクティブがあります。

EngagementApp.directive('profileModal', ['$compile', 'Request', '$modal', '$q','createDialog',
function($compile, Request, $modal, $q, createDialog) {

    return {
        restrict : 'A',
        scope : false,
        link : function(scope, element, attrs) {
            var modalPromise = null;
            element.bind('click', function(e) {
                e.preventDefault();
                scope.modal = {
                    username : attrs.profileModal,
                    url : main_site_url
                };

                scope.url = main_site_url;

                console.log(scope);
                createDialog({
                    id : 'profile_modal',
                    title : attrs.profileModal + " 's Profile",
                    template : '<iframe src="{{url}}{{modal.username}}?modal=true" style="width: 100%; height: 100%; border: none;"></iframe>',
                    footerTemplate: '<button class="btn" ng-click="$modalCancel()">Close</button>',
                    backdrop: true,
                    css : {                     
                        height: '80%'
                    }
                }, scope);

            });

        }
    };
}]);

これが混乱する場所です。members ディレクティブから呼び出された場合、モーダルのディレクティブは機能しません。temp;ate オプション {{url}} と {{username}} が空です。

しかし、メンバーディレクティブが設定されていない別の要素に profileModal を配置すると(最初に呼び出されます)、機能します。

ここで、スコープまたはスコープへのテンプレートのバインドで何か問題がありますか?

4

1 に答える 1

1

profileModal ディレクティブについては、次のようにスコープ プロパティを指定してみてください (これにより、値ではなく実際のオブジェクトを使用できると思います)。

scope: { user: "=" }

次に、最初のディレクティブのテンプレートで、次のようなことができます。

<a profile-modal user="user" ...>

2 番目のディレクティブのリンク関数では、scope.user およびそのオブジェクトのその他のプロパティにアクセスできる必要があり、それらをテンプレートで使用できます (つまり、user.userName など)。

于 2013-09-23T06:37:26.080 に答える