Angular Kendo Splitter只綁定第一個窗格上的數據

我一直無法弄清楚爲什麼在我的Kendo UI拆分器的第一個窗格之後，Angular沒有綁定數據。Angular Kendo Splitter只綁定第一個窗格上的數據

下面是相關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的行爲不同？難道我做錯了什麼？

來源

2015-05-04 Lucy

因爲你在一個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並破壞您的頁面。

來源

2015-05-05 07:15:45 Christina

Angular Kendo Splitter只綁定第一個窗格上的數據

回答

相關問題