Question

我正在使用angular-formly在angular-ui-bootstrap模式中构建一个表单，当表单放在模态模板之外时，下面的代码可以工作但是当它放在ng-template中时它不会，它只是根本不打印字段。

我相信这应该有用，但我不知道角度形式的生命周期是如何运行的，所以我无法确定如何使字段显示在我的引导模态模板中。

该问题显然与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>

有什么想法吗？

Answer 1

致电$uibModal.open时，您需要指定controllerAs: 'vm'（您的模板假定控制器定义为）。

无法在角度ui-bootstrap模式的ng模板中进行角度形式的工作

1 个答案: