如何使用AngularJS向Kendo Window模态框传递数据？

嘿，我来帮你搞定这个传参问题！针对你用k-options没成功的情况，我整理了几种靠谱的方法，你可以根据自己的项目情况选择：

方法一：通过k-options直接传递数据 #

如果是用Kendo UI的模态框，你需要确保k-options里的data属性正确配置，并且在模态框的控制器里能正确读取到这些数据。

步骤1：在触发控件中绑定k-options #

比如在按钮上配置：

<button kendo-button ng-click="openEditModal()" k-options="editModalOptions">编辑子项</button>

步骤2：在控制器中定义editModalOptions #

把要传递的数据放在data字段里：

$scope.editModalOptions = {
  contentUrl: 'edit-sub-item.html',
  title: '编辑子项',
  width: 600,
  data: {
    subItemId: 456,
    subItemInfo: { name: "测试子项", status: "active" }
  }
};

步骤3：在模态框的控制器中读取数据 #

如果你的模态框有独立控制器，可以通过Kendo的对话框实例来获取数据：

app.controller('EditSubItemCtrl', function($scope) {
  // 获取对话框实例
  var dialog = $scope.$parent.kendoDialogInstance;
  // 读取传递的数据
  $scope.subItem = dialog.options.data;
  // 现在就可以在模态视图里用{{subItem.subItemId}}这类表达式访问数据啦
});

方法二：用共享服务传递数据（更灵活） #

如果k-options的方式不好用，或者你需要传递更复杂的数据，推荐用Angular的共享服务来存取值：

步骤1：创建共享数据服务 #

app.service('ModalSharedData', function() {
  var currentData = {};
  
  return {
    setData: function(data) {
      currentData = angular.copy(data);
    },
    getData: function() {
      return currentData;
    }
  };
});

步骤2：打开模态框前存入数据 #

app.controller('MainCtrl', function($scope, ModalSharedData) {
  $scope.openEditModal = function(selectedSubItem) {
    // 把要传递的数据存入服务
    ModalSharedData.setData(selectedSubItem);
    // 初始化并打开模态框
    var dialog = angular.element('<div></div>').kendoDialog({
      contentUrl: 'edit-sub-item.html',
      title: '编辑子项'
    }).data('kendoDialog');
    dialog.open();
  };
});

步骤3：在模态框控制器中读取数据 #

app.controller('EditSubItemCtrl', function($scope, ModalSharedData) {
  // 从服务中取出数据
  $scope.subItem = ModalSharedData.getData();
});

常见问题排查 #

• 检查k-options的配置是否有语法错误，比如对象格式是否正确、引号是否匹配
• 如果模态框使用了独立的作用域，确保数据能跨作用域访问到（共享服务的方式就不会有这个问题）
• 确认edit-sub-item.html对应的控制器已经正确注入了所需的依赖（比如共享服务）

内容的提问来源于stack exchange，提问作者ivva