Angular Kendo Splitter 仅在第一个窗格上绑定数据

Question

我一直无法弄清楚为什么 Angular 没有在我的 Kendo-UI 拆分器的第一个窗格之后的任何地方绑定数据。

这里是相关的 HTML，使用 {{formData.hello}} 来说明问题发生的时间：

<div ng-controller="MyCtrl">
    <p>A = {{formData.hello}}</p>
    <div id="idLeftRight">
        <div>
            <p>Content on the left.</p>
            <p>B = {{formData.hello}}</p>
        </div>
        <div>
            <p>Content on the right.</p>
            <p>C = {{formData.hello}}</p>
        </div>
    </div>
    <p>D = {{formData.hello}}</p>
</div>

上面显示“A = Hello world”和“B = Hello world”，但“C = {{formData.hello}}”和“D = {{formData.hello}}”。

如果第二个窗格（包含“C =”的div）被移除，因此拆分器中只有一个窗格，则“D = Hello world”会按预期出现。

这里是 Javascript：

angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {      
    $scope.formData = {};
    $scope.formData.hello = "Hello world";

    $('#idLeftRight').kendoSplitter({
        orientation: "horizontal",
        panes: [
            { collapsible: false, size: "30%" },
            { collapsible: false },
        ]
    });
}

Plunker：Kendo Splitter problem

但是，如果我将 ID 为“idLeftRight”的 div 更改为：

<div kendo-splitter
    k-panes="[ { collapsible: false, size: '30%' } , { collapsible: false } ]"
    k-orientation="horizontal">

然后就可以了。

为什么 kendoSplitter() 的行为与 kendo-splitter 不同？我做错了吗？

Answer 1

由于您在一个 Angular 应用程序中，您应该使用标记来定义您的 Kendo 拆分器（您已经尝试过并且正在工作的方式）而不是使用控制器中的 javascript 修改 DOM（这是您在你打电话给$('#idLeftRight').kendoSplitter({...})。

如果您打开浏览器控制台，您会在 Plunker 中注意到在评估您对 kendoSplitter 的 javascript 调用时出现以下错误：

TypeError: Cannot read property 'childNodes' of undefined
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at nodeLinkFn (angular.js:6705)
    at compositeLinkFn (angular.js:6105)
    at compositeLinkFn (angular.js:6108)
    at compositeLinkFn (angular.js:6108)
    at publicLinkFn (angular.js:6001)
    at angular.js:1449
    at Scope.$get.Scope.$eval (angular.js:12701)

然后导致 C 和 D 没有正确绑定。我不确定自己到底是什么问题，但在我看来，您对 kendoSplitter() 的调用会导致 Kendo 在 Angular 的摘要周期之外修改 DOM，这会“混淆”Angular 并破坏您的页面。