Angular Kendo 拆分器仅在第一个窗格上绑定数据

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 },
        ]
    });
}

笨蛋：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 拆分器（您已经尝试过并且正在工作的方式）而不是修改 DOM 在你的控制器中使用 javascript （这就是你在调用 $('#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 "confuses" Angular 并破坏了你的页面。

Angular Kendo 拆分器仅在第一个窗格上绑定数据

Angular Kendo Splitter only binding data on the first pane

kendo-ui

angularjs

kendo-ui-splitter

angular-kendo

kendo-splitter