CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
fefe
fefe

Reputation: 9055

Angular directive not appending data

I try to append some content via directive but never appears in view. If I log the compiled scope I can see the Object.

angular.module('blancAppApp')
  .controller('SlugCtrl', function ($scope, WpApi, $compile, $filter, ngProgressLite) {

    // the Content to be rendered.
   $scope.maincontent = [];
   // load remote data from the server.
   function loadRemoteData() {
   // The WpApiService returns a promise.
        WpApi.getContents()
        .then(
            function( post ) {       
                applyRemoteData( post );       
            });    
    }

     // apply the remote data to the local scope.
    function applyRemoteData( newContents ) {    
        $scope.maincontent  = $compile( newContents[0].content )($scope);  
        console.log($scope.maincontent); // Object getting logged
    }     

}).directive('maincontent', function() {

    return {
            restrict: 'A',
                scope: {
                    maincontent: '=maincontent'
                },

                link: function (scope, element, attrs) {  

                       element.append( scope.maincontent  );
                    }
                };
});

Markup

<div id="main-content" data-maincontent="maincontent"></div>

Upvotes: 1

Views: 130

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32377

You need to register a watcher on the scope because the request is async:

var unregister = scope.$watch('maincontent', function(val) {
  if(!val) { return; }
  element.append( val  );
  unregister();
});

Upvotes: 1

Related Questions