ディレクティブとそのスコープの操作に問題があります。サイトのすべてのメンバーを取得するためのディレクティブを作成し、次のように 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 を配置すると(最初に呼び出されます)、機能します。
ここで、スコープまたはスコープへのテンプレートのバインドで何か問題がありますか?