0

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 と異なる動作をするのはなぜですか? 私は何か間違ったことをしていますか?

4

1 に答える 1