1

我正在使用 angular-formly 在 angular-ui-bootstrap 模态中构建表单，以下代码在表单放置在模态模板之外时有效，但在放置在 ng-template 内时不起作用，它只是没有完全打印这些字段。

我相信这应该可行，但我不知道 angular-formly 的生命周期是如何运行的，所以我无法确定如何使这些字段显示在我的引导模式模板中。

该问题显然与 ng-template 有关，即使正确传递了 fields 数组，它似乎也不会呈现表单。

var app = angular.module("demo", ['dndLists', 'ui.bootstrap', 'formly', 'formlyBootstrap']);

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, User) {

    var vm = this;

    vm.loadingData = User.getUserData().then(function(result) {
      vm.model = result[0];
      vm.fields = result[1];
      vm.originalFields = angular.copy(vm.fields);
      console.log(vm);
    });

});

app.controller("AdvancedDemoController", function($scope, $uibModal){

    $scope.modalOpen = function(event, index, item){
        var modalInstance = $uibModal.open({
          animation: true,
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: 'md',
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
});

在我看来：

<!-- Template for a modal -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
            <strong>Loading...</strong>
        </div>
        <div ng-if="vm.loadingData.$$status.state !== 0">
            <form ng-submit="vm.onSubmit()" novalidate>
                <formly-form model="vm.model" fields="vm.fields" form="vm.form">
                    <button type="submit" class="btn btn-primary submit-button">Submit</button>
                </formly-form>
            </form>
        </div>
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
</script>

有任何想法吗？

4

1 回答 1

2

调用时$uibModal.open您需要指定controllerAs: 'vm'（这就是您的模板假设控制器被定义为）。

于 2015-11-19T18:24:27.827 回答