I'm encountering some challenges with directives and their scope. I've developed a directive to fetch all the members of a site and display them within a div, here's the code snippet:
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;
}
});
}
};
}]);
This setup works smoothly. Now I have another directive that triggers a modal for a user when clicked, as shown below:
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);
});
}
};
}]);
The issue arises here. The modal directive, when invoked from the members directive, fails to work correctly. The template options {{url}} and {{username}} remain empty.
However, if I apply the profileModal to another element that was not populated by the members directive (thus called first), it functions properly.
Do you think there might be an error in how I am handling the scope or binding templates to it?