动态将HTML内容作为属性传递给Angular指令

Question

我正在尝试使用Angular动态加载一些存储在JSON文件中的HTML。

为此，我将JSON数据读取到范围中，并将其传递给我编写的用于将HTML加载到模板中的指令。

控制者

.controller('testCtrl', function($scope, $http, $state){

    $http.get('views/foo.json').then(function(res){

      $scope.somehtml = res.data;

    });

}) 

指示

.directive('loadHtml', function($compile){

        return {
        restrict: 'AE',
        scope: {
            content: "@",
        },
        link: function(scope, element, attrs) {
            scope.content = attrs.content;
            element.html(scope.content).show();
            $compile(element.contents())(scope);
        },
        template: '{{content}}'
    };

})

这可行！

<load-html content="hello success"></load-html> 

这不是：（

<load-html content="{{somehtml}}"></load-html>

我在这里想念什么？

Answer 1

自己找到了解决方案，也许这对某人有帮助：

我需要“观察”指令中的属性值。

新指令：

.directive('loadHtml', function($compile){

    return {
        restrict: 'AE',
        scope: {},
        link: function(scope, element, attrs) {

            attrs.$observe('content', function(val) { /* $observing the attribute scope */
                scope.content = val;
                element.html(scope.content).show();
                $compile(element.contents())(scope);
            })
        },
        template: '{{content}}'
    };
})