Question

我在使用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 options {{url}}和{{username}}为空。

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

我是否在使用示波器范围或绑定模板做错了什么？

Answer 1

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

scope: { user: "=" }

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

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

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

AngularJS和指令范围与模板不填充

1 个答案: