$http json 响应中的 AngularJS 指令答案

【问题标题】：AngularJS directive in $http json response$http json 响应中的 AngularJS 指令
【发布时间】：2014-12-31 03:04:08
【问题描述】：

我尝试和here一样的事情

我使用 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);
        }
    };
});

应该调用的指令

angular.module('blancAppApp')
  .directive('masonry',  function(scope, element, attrs, $timeout) {
            console.log('asdasd');
            var container = element.querySelector('#grid');
                var msnry = new Masonry( container, {
                // options...
                itemSelector: '.masonry-brick',
                columnWidth: 200
            });



        return {
            restrict: 'E'        
        };

  });

生成的视图

<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>

使用指令调用生成标记

<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>

plunker

【问题讨论】：

标签： angularjs compilation angularjs-directive

【解决方案1】：

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

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

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

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div data-ng-controller="SlugCtrl">
            <div id="compiled_content" data-compiled="compiled">

            </div>
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('SlugCtrl', function ($scope, $compile) {
                $scope.some_var = 'var content';
                var template = '<div>{{some_var}}</div>';
                $scope.compiled = $compile(template)($scope);
                $scope.some_var = 'var content canged';
            }).directive('compiled', function() {
                return {
                    restrict: 'A',
                    scope: {
                        compiled: '=compiled'
                    },
                    link: function (scope, element, attrs) {
                        element.append(scope.compiled);
                    }
                };
            });
        </script>
    </body>
</html>

我使用了element.append(scope.compiled); 而不仅仅是{{scope.compiled}}，因为编译结果是对象而不是字符串。

你的 applyRemoteData 函数必须是这样的：

function applyRemoteData( newContents ) {
    $scope.compiled = $compile('<div>' + newContents + '</div>')($scope);
}

【讨论】：

是的，这似乎是我需要的，但我在应用远程数据时遇到了问题
我收到assignment to undeclared variable $compiled
控制台是否出现错误？您也可以尝试将模板包装在
中，这样它就只有一个顶级元素。
我一直在使用firebug，chrome在控制台中包装模板没有错误。我在控制器上添加了一个更新，因为我使用服务来获取远程数据