无法使 angular-formly 在 angular-ui-bootstrap 模态的 ng 模板中工作

Question

我正在使用 angular-formly 在 angular-ui-bootstrap 模态中生成 uild 表单，以下代码有效当表单放置在模态模板之外但放置在 ng 模板内时却没有，它根本不打印字段。

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

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

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'（假设控制器被定义为您的模板）。

无法使 angular-formly 在 angular-ui-bootstrap 模态的 ng 模板中工作

Unable to make angular-formly work within a ng-template of an angular-ui-bootstrap modal

angularjs

angular-ui-bootstrap

angular-template

angular-formly