Angular Kendo Splitter связывает только данные на первой панели

Question

У меня были проблемы с выяснением, почему Angular не привязывает данные нигде после первой панели моего сплиттера Kendo-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>

Выше показаны "A = Hello world" и "B = Hello world", но "C = {{formData.hello}}" и "D = {{formData.hello}}".

Если вторая панель (div, содержащий "C =") удалена, поэтому в разделителе есть только одна панель, то "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 },
        ]
    });
}

Плункер: проблема Кендо Сплиттера

Однако, если я изменю div с идентификатором "idLeftRight" на:

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

тогда это работает.

Почему kendoSplitter() ведет себя иначе, чем kendo-splitter? Я делаю что-то неправильно?

Answer 1

Поскольку вы находитесь в приложении Angular, вы должны использовать разметку для определения вашего сплиттера Kendo (как вы уже пробовали и работаете) вместо того, чтобы модифицировать DOM с помощью javascript внутри вашего контроллера (что вы и делаете, когда вызываете $('#idLeftRight').kendoSplitter({...}),

Вы заметите в своем Plunker, если откроете консоль браузера, что при оценке вашего вызова javascript для kendoSplitter появляется следующая ошибка:

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 модифицировать DOM вне цикла дайджеста Angular, что "сбивает с толку" Angular и ломает вашу страницу.