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}}”。

如果删除了第二个窗格（包含“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并破坏你的页面。

Angular Kendo Splitter仅在第一个窗格上绑定数据

1 个答案: