$http json响应中的AngularJS指令

我试着做和你一样的事情

我使用Ajax服务器检索Json包含带有指令的标记的数据，并尝试使用$compile启动此数据，但此时没有任何运气

这是我尝试使用

$compile

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

    // the Content to be rendered.
   $scope.post = [];
   //loading animate starts
   ngProgressLite.start();
   loadRemoteData();

   // 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 ) {
        var compiled = $compile( newContents )($scope);
        console.log(compiled); // this one shows me the object then object.content contains my masonry directive
       firebug output: <div class="ng-scope">[object Object]</div>
    }



  //loading animate ends
  ngProgressLite.done();        

}).directive('compiled', function($timeout) {
            return {
                restrict: 'E',
                scope: {
                compiled: '=compiled'
            },

            link: function (scope, element, attrs, $timeout) {

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

生成的视图

<div ng-repeat ="article in post " id="#main-content">
    <div ng-bind-html="article.content | unsafe">
        <div ng-controller="ContentCtrl">       
            {{ article.content }}
        </div>
    </div>
</div>

{{article.content}

使用指令调用生成的标记

<div id="grid" masonry="">
 <div class="masonry-brick "><img src=""... /></div>
 <div class="masonry-brick "><img src=""... /></div>
 <div class="masonry-brick "><img src=""... /></div>
</div>

---

您错误地使用了$compile$compile返回“用于绑定模板的链接函数”。所以您需要调用返回的函数。尝试：

var compiled = $compile($scope.post)($scope);
console.log(compiled);

然后，结果元素必须附加到DOM文档的某个位置，例如，使用指令：

var app=angular.module（'plunker'，[]）；
app.controller（'SlugCtrl'，函数（$scope，$compile）{
$scope.some_var='var content'；
变量模板=“{some_var}}}”；
$scope.compiled=$compile（模板）（$scope）；
$scope.some_var='var content canged'；
}).directive（'compiled'，function（）{
返回{
限制：“A”，
范围：{
已编译：'=已编译'
},
链接：函数（范围、元素、属性）{
元素.append（scope.compiled）；
}
};
});

是的，这似乎是我所需要的，但我在应用远程数据时遇到了问题。我将

赋值给未声明的变量$compiled

控制台中是否有错误？你也可以尝试包装你的模板，这样它就只有一个顶级元素了。我一直在使用firebug、chrome在控制台包装模板，没有错误。我在控制器上添加了一个更新，因为我使用一个服务来获取远程数据

var compiled = $compile($scope.post)($scope);
console.log(compiled);