2

我在使用 direvtives 及其范围时遇到问题。我创建了一个指令来获取站点的所有成员并将它们放在一个 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);

            });

        }
    };
}]);

在这里搞砸了。当从成员指令中调用模态指令时，它永远不会起作用。temp;ate 选项 {{url}} 和 {{username}} 为空。

但是，如果我将 profileModal 放在另一个没有填充成员指令的元素上（所以它首先调用），它就可以工作。

我在这里对范围或将模板绑定到范围做错了吗？

4

1 回答 1

1

对于 profileModal 指令，尝试像这样指定范围属性（我相信这允许您拥有实际对象而不是值）：

scope: { user: "=" }

然后，在第一个指令的模板中，您可以执行以下操作：

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

在第二个指令的链接函数中，您应该有权访问 scope.user 和该对象上的任何其他属性，并且可以在模板中使用它们（即 user.userName 等）

于 2013-09-23T06:37:26.080 回答