데이터를 추가하지 않는 각도 지시문

Question

지시문을 통해 일부 내용을 추가하려고 시도하지만 절대로 표시되지 않습니다. 컴파일 된 범위를 기록하면 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 ); 
        } 
       }; 
}); 

마크 업 당신은 요청이 비동기이기 때문에 범위에 감시자를 등록해야

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

Answer 1

: 나는 scope.maincontent 참조에 의해 전달되는 생각하지 않는다

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