Angular Kendo Splitter只绑定第一个窗格上的数据

Question

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

下面是相关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 =世界你好” 和“B =世界你好“，但是”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({...})

如果打开会出现以下错误，当你到kendoSplitter 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不被正确地绑定，我不确定自己究竟是什么问题是，在我看来，对kendoSplitter（）的调用会导致Kendo在Angular的摘要循环之外修改DOM，这会“混淆”Angular并破坏您的页面。