get data immediately in angularjs using $http or $resource

Question

i created a plug-in for field

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);
    }
};
}]);

roles data will be used in 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;
}]);

i want roles array in this template but service is taking time so roles is not defined in template it is executing after some time

my question is that i want roles data from the request only then go to template which is defined in link?

Answer 1

Try var tpl = '<div ng-repeat ="role in roles" ng-show="roles&&(roles.length>0)"> '+' <label>role.name</label>' +' </div>'

Answer 2

Did you tried using the $q promise object ? resolve it in your $http method, then use it with .then :) Here is a link from the docs : https://docs.angularjs.org/api/ng/service/$q

Answer 3

The template needs double curly brackets {{ }} to bind data to the DOM:

factory.getTemplate = function(type, scope){
    scope.field = scope.ersProfileEditableField; 
    var tpl = '<div ng-repeat ="role in roles"'> 
          // +' <label>role.name</label>'
          // USE {{ }} for interpolation
            +' <label>{{role.name}}</label>'
            +' </div>'
    return tpl;
};

---

The compile can be delayed by using a watcher:

link: function(scope, iElement, iAttrs, controller){
    scope.$watch("::roles", function (newValue) {
        if (newValue) {
            iElement.append(
                profileFieldService
                    .getTemplate(scope.ersProfileEditableField.type, scope)
            );
            $compile(iElement.contents())(scope);
        };
    });
}

The watcher waits for the roles data that is fetched from the server before doing the compile. It uses a one-time binding so that the compile is performed only once but the ng-repeat directive will continue to update the DOM as the value of roles changes.