Question

我尝试使用模态编辑表单，模式在ng-template脚本中，但单击编辑按钮时不显示表单数据。
$ scope不适用于模板脚本我创建了一个Plunker here

$scope.setCurrentItem = function (item) {
    $scope.currentItem = item;
};

$scope.edit = function (item) {            //editing item
    $scope.setCurrentItem(angular.copy(item));            
    //$scope.editItem = item;
    openEditModal();
};

<!--html-->
<script type="text/ng-template" id="myModalContent.html">     
<label for="name">Role: </label>                                
<input type="text" ng-model="currentItem.roleName" required />
</script>

我该如何解决？

Answer 1

默认情况下，ui bootstrap $modal使用$rootScope作为默认范围。但是你假设它将自动占用打开对话框的控制器的范围，但这不会发生。但是有一个scope属性可以设置为将范围传递给ui模式，以便它将使用该范围并从提供的范围中创建子范围，并将用作模式的基础范围。因此，你的模态包装器也会在其设置中获取scope属性并将其传递给它。

From Doc

范围 - 用于模态内容的范围实例（实际上，$ modal服务将创建提供范围的子范围）。默认为$ rootScope。

示例更改： -

  function openEditModal() {
     var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Save role',
        headerText: 'Edit role',
        bodyText: '',
        scope:$scope //<-- Pass scope
    };

    Modal.showModal({ templateUrl: 'myModalContent.html', size: 'lg' }, modalOptions).then(function (result) {
        console.log("save!", result);
    });
  }

并在您的服务中： -

  /*I just did this here based on my limited understanding of your code*/
  return $modal.open(angular.extend(tempModalDefaults, customModalOptions)).result;

从您的模态模板传回项目，我不确定您的模板是否是通用的，如果是这样，那么您可能需要采用不同的方法来传输数据： -

  <button class="btn btn-primary" ng-click="modalOptions.ok(currentItem)">{{modalOptions.actionButtonText}}</button>

<强> Demo

$ scope不适用于ng-template

1 个答案: