I designed a plugin for field customization.
angular.module('ersProfileForm').directive('ersProfileEditableField', ['$templateCache', '$compile', 'profileFieldService', 'RolesService',
function($templateCache, $compile, profileFieldService , RolesService){
return {
restrict: 'AE',
templateUrl: '',
scope: {
ersProfileEditableField: '=',
ersProfileSectionData: '=',
ersProfileEditableFieldValue: '=',
ersBulkEdit: '<'
},
controller: ['$scope', '$http','$q','$resource', function($scope, $http, $q, $resource){
$http.get('rest/roles',{}).then(function(response){
$scope.roles = response.data;
});
}],
link: function(scope, iElement, iAttrs, controller){
iElement.append(jQuery(profileFieldService.getTemplate(scope.ersProfileEditableField.type, scope)));
$compile(iElement.contents())(scope);
}
};
}]);
The role's data is essential for this template.
angular.module('ersProfileForm').factory('profileFieldService', ['$resource', function($resource){
var factory = {};
factory.getTemplate = function(type, scope){
scope.field = scope.ersProfileEditableField;
var tpl = '<div ng-repeat ="role in roles"'>
+' <label>{{role.name</label>'
+' </div>'
break;
return tpl;
};
return factory;
}]);
My issue is that I need the roles array in the template, but the service has a delay in fetching it, so roles are not defined at first, and this results in executing later times.
Is there a way to ensure that the roles data is fetched before moving on to the template as specified in the link section?