如何使用angularjs将数据传递到剑道窗口答案

【问题标题】：How to pass data to kendo window using angularjs如何使用angularjs将数据传递到剑道窗口
【发布时间】：2018-02-06 21:12:08
【问题描述】：

我展示了代码的一部分，因为它是一个大控制器和视图。我正在尝试将带有数据的k-options 传递给模式，但它没有设置。

vm.subItemOptions = {};
vm.editPlanSubItem = function() {
// some custom logic to get the data
      var params = {
                planItems: planItems,
                child: child,
                index: index,
                key: key
            };
            
            vm.subItemOptions = params; // trying to pass data to modal unsuccessfully

            vm.editPopup.center();
            vm.editPopup.open();
            
}

 <div ng-controller="MainCtrl as vm">
        <div class="demo-section k-content">
            <button class="k-button"  ng-click="vm.editPlanSubItem()">Edit</button>
        </div>
        
         <div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
             k-width="600" k-height="200" k-visible="false"
             k-content="{ url: siteURL + '/public/scripts/views/edit-sub-item.html'}"
             k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
        </div>

模态视图edit-sub-item.html的一部分是：

<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
    <div class="modal-content">
        <div class="color-line"></div>
        <div class="modal-header">
            <h3 class="modal-title" ng-bind="message"></h3>
            <div class="row">
                <div class="col-md-12">
                    <label class="item-goal">Goal</label>
                    <div class="plan-items-td">
                        <input ng-disabled="params.planItems[0].Status === 'Approved'" type="text"
                               class="k-textbox plan-items"
                               ng-model="params.planItems[params.index].children[params.key].Goal">

                    </div>
                </div>
            </div>
            //other code
         
        </div>
    </div>
</div>

如何将参数传递给模态？

【问题讨论】：

标签： javascript angularjs kendo-ui

【解决方案1】：

如果您使用的是 angularjs 1.5+，我建议您使用 component （如果你甚至有机会使用 React、Angular 和 Vue.js 等基于组件的架构）。无论如何，使用组件非常简单。首先是父组件：

<div ng-controller="MainCtrl as vm">
  <div class="demo-section k-content">
      <button class="k-button"  ng-click="vm.editPlanSubItem()">Edit</button>
  </div>
        
  <div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
     k-width="600" k-height="200" k-visible="false"
     k-on-open="win2visible = true" k-on-close="win2visible = false">
    <edit-sub-item params="vm.subItemOptions"></edit-sub-item>
  </div>
</div>

然后在edit-sub-item组件中：

// Add any injected param in this component like $scope if you need, or any service that you created
function editSubItemController(){
  var vm = this;
  
  // Need to be in one of the component lifecycle hooks
  vm.$onChanges = function(props){
    console.log(vm.params);
  }
}

angular.module('ApplicationName').component("editSubItem", {
    controllerAs: 'vm',
    controller: editSubItemController,
    templateUrl: './public/scripts/views/edit-sub-item.html',
    bindings: {
        params: '<' //one way binding
    }
});

<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
    <div class="modal-content">
        <div class="color-line"></div>
        <div class="modal-header">
            <h3 class="modal-title" ng-bind="message"></h3>
            <div class="row">
                <div class="col-md-12">
                    <label class="item-goal">Goal</label>
                    <div class="plan-items-td">
                        <input ng-disabled="vm.params.planItems[0].Status === 'Approved'" type="text"
                               class="k-textbox plan-items"
                               ng-model="vm.params.planItems[vm.params.index].children[vm.params.key].Goal">

                    </div>
                </div>
            </div>
            //other code
         
        </div>
    </div>
</div>

【讨论】：