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

如果第二个窗格（包含“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：剑道分离器问题

但是，如果我将 ID 为“idLeftRight”的 div 更改为：

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

然后它工作。

为什么 kendoSplitter() 的行为与 kendo-splitter 不同？难道我做错了什么？

4

1 回答 1

0

由于您在 Angular 应用程序中，因此您应该使用标记来定义您的 Kendo 拆分器（您已经尝试过并且正在工作的方式），而不是在控制器中使用 javascript 修改 DOM（这是您在调用$('#idLeftRight').kendoSplitter({...}).

如果您打开浏览器控制台，您会在 Plunker 中注意到在评估您对 kendoSplitter 的 javascript 调用时出现以下错误：

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-05T07:15:45.780 回答