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}}'
    };
})

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

1 个答案: