刷新内容后编译剑道窗口答案

【问题标题】：Compile kendo window after refresh content刷新内容后编译剑道窗口
【发布时间】：2014-12-17 00:57:10
【问题描述】：

我的页面中有一个 kendo-window，我希望每次单击命令时都将内容加载到其中。我要加载的内容来自 x-kendo-template 或来自 .html 的 angular {{Sample}} 表达式。加载内容后，我尝试 $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 Template

相同

现在，当我使用 $compile 函数时，它会显示 $apply already in progress 的错误

任何帮助将不胜感激。 TIA

我还准备了JSFiddle

【问题讨论】：

标签： javascript angularjs kendo-ui kendo-window kendo-template

【解决方案1】：

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

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

最后一个布尔参数（或多或少）是$scope.$apply。 See the Documentation

编辑：

您还可以使用 $parse 服务做一些很酷的事情。 You might find it useful as explained in this blog

【讨论】：

嗨...它适用于模板场景..但是，它不适用于 url..所以我认为从 URL 检索值可能需要更长的时间才能执行 $timeout..有什么解决办法吗？ url完全下载后的like事件
感谢您指出这一点.. 因为我使用的是 url 方法，所以这个解决方案不起作用。我所做的是我把它放在窗口的刷新事件中，现在工作正常。
你可以把内容放到$templateCache中。模板是在服务器上动态生成的吗？
这不是.. 它只是一个普通的 html 标签、表达式和剑道模板，存储在不同的 html 文件中.. insert.html、view.html , update.html
您知道，考虑到您的要求，我只会将 kendo 指令包装在您自己的指令中。这样，您可以使用 $http （及其内置的承诺）检索模板，然后在将其返回给 kendo 之前手动控制 $compile 函数。注意：在这个过程中你可能需要使用 k-ng-delay。