Question

我有一个kendo UI panelBar，我想动态加载数据。我想在panelBar选项中有一个使用Angular的模板。我有这部分代码，但这不起作用。

    $http({
        method: 'GET',
        url: '/PDFEditor/GetPDFDocumentInfo',
        params: { fileId: fileId }
    }).then(function successCallback(response) {

        $scope.test = "My name is: <h1>Bond, James Bond </h1>";

        var tml = '<div id="testId"></div>';

        $scope.pdfInfo = response.data;

        $scope.appendToPanelBar([{
            text: 'Info',
            content: tml
        }]);

        document.getElementById("testId").innerHTML = "<p ng-bind-html=\"test\"></p> {{test}}";


    }, function errorCallback(response) {
        //todo
        console.error('todo error handling');
    });

我也试过没有按ID获取元素并直接添加到内容：'{{test}}'。似乎AngularJS不编译此模板。

Answer 1

我找到了解决方案!!

        $scope.test = "My name is: <h1>Bond, James Bond </h1>";

        var tml = '<div id="testId"></div>';
        var data = $compile('<p>{{test}}</p>')($scope);
        console.log(data)
        $scope.pdfInfo = response.data;

        $scope.appendToPanelBar([{
            text: 'Info',
            content: tml
        }]);

        document.getElementById("testId").append(data[0]);

喝彩！

Kendo UI panelBar内容不会编译Angular

1 个答案: