Kendo UI panelBar 内容无法编译 Angular答案

【问题标题】：Kendo UI panelBar content doesnt compile AngularKendo UI panelBar 内容无法编译 Angular
【发布时间】：2017-07-20 08:57:15
【问题描述】：

我有一个剑道 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没有编译这个模板。

【问题讨论】：

标签： angularjs kendo-ui compilation

【解决方案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]);

干杯！

【讨论】：