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 = Hello world」「B = Hello world」ですが、「C = {{formData.hello}}」「D = {{formData.hello}}」です。
2 番目のペイン (「C =」を含む div) が削除され、スプリッターにペインが 1 つしかない場合、期待どおりに「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 },
]
});
}
プランカー:剣道スプリッター問題
ただし、ID「idLeftRight」のdivを次のように変更すると:
<div kendo-splitter
k-panes="[ { collapsible: false, size: '30%' } , { collapsible: false } ]"
k-orientation="horizontal">
それは動作します。
kendoSplitter() が kendo-splitter と異なる動作をするのはなぜですか? 私は何か間違ったことをしていますか?