第一次在服务器端加载和绑定 kendo mvc 包装器控件，一旦它们加载到浏览器中，我将把它们与 angular 控制器绑定

Question

我的主页使用 kendo 网格（见下面的代码片段），其中包含工具栏模板中的一些按钮

<div kendo-grid
         k-data-source="sequenceGrid"
         k-columns='[   { field: "Prefix", title : "Sequence Prefix" },
                        { field: "Year" , title: "Year" },
                        { field: "SequenceNumber" , title: "Highest Number" },
                        { field: "SeqLength" , title: "Characters" }]'
         k-selectable="true"
         k-toolbar='sequenceGridToolbar'
         k-selectable="true"
         k-on-change="selectedSequence = data">

现在我单击其中一个按钮，它调用 angular 控制器，angular 控制器调用 angular 服务从服务器获取数据，在服务器端我有 razor 视图 (. cshtml) 其中包含 kendo 用于 mvc 的服务器端包装器（代码下方）

@Html.Kendo().NumericTextBoxFor(m => m.Sequence.SequenceNumber).HtmlAttributes(new { k_ng_model = "sequenceAddViewModel.Sequence.SequenceNumber" })

现在我要做的是，当我返回结果（呈现 html 我的 .cshtml 视图）到 angular-controller 我想在上面绑定kendo 数字文本框与我的 angular 模型，但没有发生这种情况。出于测试目的，我通过为 kendo-angular 指令添加下面的代码行进行了测试，该指令按预期工作。

注意：kendo MVC 包装器和 angular 指令在同一个 .cshtml 上，它正在通过 angular 动态加载，下面的代码仅适用于 angular.

<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="sequenceAddViewModel.Sequence.SequenceNumber" />

所以我的观点看起来像

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Sequence.SequenceNumber)
    @Html.Kendo().NumericTextBoxFor(m => m.Sequence.SequenceNumber).HtmlAttributes(new { k_ng_model = "sequenceAddViewModel.Sequence.SequenceNumber" })
    @Html.ValidationMessageFor(m => m.Sequence.SequenceNumber)

    //added just for testing purposes
    <input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="sequenceAddViewModel.Sequence.SequenceNumber" />
    <br />

    <input type="button" ng-click="create()" value="Create" />
    <input type="button" ng-click="cancel()" value="Cancel" />
}

我的 angular 控制器代码是

angular.module('SequenceApp').controller('SequenceController', ['$scope', '$http', '$timeout', '$compile', '$rootScope', 'sequences', 'SequenceService', function SequenceController($Scope, $http, $timeout, $compile, $rootScope, sequences, SequenceService) {

    //kendo grid
    $Scope.sequenceGrid = sequences.Sequences;

    // grid toolbar template
    $Scope.sequenceGridToolbar = $("#sequenceGridToolbarTemplate").html();

    // selected sequence initialy empty object
    $Scope.selectedSequence = {};

    // sequence add view model initialy empty object
    $Scope.sequenceAddViewModel = {};

    


    // shows kendo window, loads contect view "SequenceService" into window 
    $Scope.showDialogeForAdd = function () {
        SequenceService.getSequenceAddTempalte().then(function (data) {
            $Scope.sequenceWindow.title("New Sequence");
            $Scope.sequenceWindow.content(data);

            $Scope.sequenceWindow.open();

            //console.log('applying scope')
            //$timeout(function () {
            //    $Scope.$apply();
            //}, 0);

            //console.log($Scope.sequenceAddViewModel);

        });
    }

    $rootScope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };

}]);

现在让我再次描述一下，我正在尝试的是第一次在服务器端加载和绑定控件，一旦它们加载到浏览器中，我将为所有其他请求将它们与 angular 控制器绑定

Answer 1

根据 kendo 的团队回复，

Kendo 服务器端和 kendo-angular 不兼容。关闭这个。

第一次在服务器端加载和绑定 kendo mvc 包装器控件，一旦它们加载到浏览器中，我将把它们与 angular 控制器绑定

first time load and bind kendo mvc wrapper controls on server side and once they get loaded into browser I will bind them with angular controller

angularjs

kendo-asp.net-mvc

kendo-ui-mvc