刷新内容后编译剑道窗口

Compile kendo window after refresh content

本文关键字：窗口 编译 新内容 刷新      更新时间：2023-09-26

我的页面中只有一个剑道窗口，每次单击命令时都想将内容加载到其中。我要加载的内容要么来自 x-kendo 模板，要么来自带有角度 {{Sample}} 表达式的.html。加载内容后，我试图$compile内容以使用角度绑定，但它不起作用。这就是我到目前为止尝试过的

在我的标记上 

<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<script id="tplAddNew" type="text/x-kendo-template">
    Action in Add New: {{ Action }}
</script>
<script id="tplView" type="text/x-kendo-template">
    Action in View: {{ Action }}
</script>
<div id="example" ng-app="Test">
    <div ng-controller="MyCtrl">
        <div kendo-window="winTesting"
            k-visible="false"
            k-modal="true"
            k-pinned="true"
            k-width="'500px'"
            k-min-height="'200px'">
        </div>
      <button 
          kendo-button 
          ng-click="AddEntry()">Add Entry</button>
      <button 
          kendo-button 
          ng-click="ViewContent()">View Content</button>
    </div>
</div>

这是我的控制器

var app = angular.module("Test", ["kendo.directives"]);
app.controller("MyCtrl", [
    "$scope", "$compile",
    function($scope, $compile) {
        $scope.AddEntry = function() {
            $scope.Action = "Add New";
            $scope.winTesting
                .refresh({
                    //url: '../References/Test-entry.html'
                    template: kendo.template($('#tplAddNew').html())
                })
                .setOptions({
                    title: "Create New User"
                });
            //$scope.$apply(function() {
            //    $compile($scope.winTesting.element)($scope);
            //});
            $scope.winTesting.open().center();
        }
        $scope.ViewContent = function() {
            $scope.winTesting
                .refresh({
                    //url: '../References/View-entry.html'
                    template: kendo.template($('#tplView').html())
                })
                .setOptions({
                    title: "View User Detail"
                });
            //$scope.$apply(function() {
            //    $compile($scope.winTesting.element)($scope);
            //});
            $scope.winTesting.open().center();
        }
    }
]);

假设 Test-entry.html 的内容与 tplAddNew 模板相同

现在，当我使用 $compile 函数时，它将显示一个错误 $apply 已经在进行

中

任何帮助将不胜感激。蒂亚

我还准备了一个JSFiddle

Kendo 还没有真正完善这个小部件。 因此，鉴于此，请使用$timeout服务：

$timeout(function() {
  $compile($scope.winTesting.element)($scope);
}, true);

最后一个布尔参数（或多或少）执行 $scope.$apply。 查看文档

编辑：

您还可以使用$parse服务做一些很酷的事情。 您可能会发现它很有用，如本博客中所述

相关文章：