Angularjs 角度剑道拆分器仅绑定第一个窗格上的数据

我一直很难弄明白为什么Angular在我的剑道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>

普朗克：

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

然后它就起作用了

---

为什么kendoSplitter（）的行为与kendo splitter不同？我做错了什么吗？

因为你在一个角度应用程序中，你应该使用标记来定义剑道拆分器（你已经尝试过并且正在使用的方式），而不是在你的控制器中用javascript修改DOM（这是你调用

$（'#idLeftRight'）。剑道拆分器（{…}）

如果打开浏览器控制台，在计算对KendoSpliter的javascript调用时，您会在Plunker中注意到以下错误：

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不能正确绑定。我自己也不确定到底是什么问题，但在我看来，调用kendospliter（）会导致Kendo在Angular的摘要周期之外修改DOM，这会“混淆”Angular并破坏您的页面

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

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)