【问题标题】:Ui-bootstrap-modal with ui-bootstrap-tpls-0.13 and bootstrap 3.3.2, angular 1.3.14 not workingui-bootstrap-modal 与 ui-bootstrap-tpls-0.13 和 bootstrap 3.3.2,角度 1.3.14 不起作用
【发布时间】:2015-06-26 15:34:36
【问题描述】:

正如标题中提到的,模态不会显示。 表单的内容是通过formly加载的,模板的内容似乎加载了,但它只显示模态很薄,有覆盖而不是内容。

我有一个主控制器,其中有:

$scope.add = function(){
        $modal.open({
            templateUrl: 'app/js/templates/popupAddCarForm.html',
            controller: 'FormsController',
            controllerAs: 'vm',
            backdrop: 'static',
            resolve: {
                formData: function(){
                    return {
                        fields: getFormFields(),
                        model: {}
                    }
                }
            }
        });
    };

我的html是这样的:

<script type="text/ng-template" id="popupAddCarForm">
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3 class="modal-title">Adauga masina</h3>
        </div>
        <div class="modal-body">
            <form name="vm.addCarForm">
                <formly-form model="vm.formData.model" fields="vm.formData.fields">
                </formly-form>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" type="submit" >Adauga</button>
        </div>
    </div>
</div>

我的表单控制器是这样的:

davidintercar.controller('FormsController',
    function($modalInstance, formData) {
        var vm = this;
        //debugger;

        vm.formData = formData;
        vm.originalFields = angular.copy(vm.formData.fields);

    }
);

结果是这样的:

稍后编辑:

为了打消其他疑惑,下面是演示中的代码:

app.controller('ModalInstanceCtrl', function ($modalInstance, formData) {
var vm = this;
debugger;

// function assignment
vm.ok = ok;
vm.cancel = cancel;

// variable assignment
vm.formData = formData;
vm.originalFields = angular.copy(vm.formData.fields);

// function definition
function ok() {
  $modalInstance.close(vm.formData.model);
}

function cancel() {
  $modalInstance.dismiss('cancel');
};

});

链接:angular-formly.com/#/example/integrations/ui-bootstrap-modal

稍后,稍后编辑:

Plunker:http://plnkr.co/edit/8wgL4t2oXsFFeLBKGGW8?p=preview

文件夹结构:

--app
----js
------controller
------services
------templates
------view
----app.js
intex.html

我的 popupAddCarForm.html 位于模板目录中,但正如您在 plunker 中看到的那样,它不会呈现我加载的内容,即使在同一个目录中,尽管是一个单独的模板文件。

【问题讨论】:

  • 你有没有看过the example这是做什么的?
  • @kentcdodds:检查编辑
  • 似乎不是版本的组合:jsbin.com/migico/1/edit?html,js,output。也许制作一个 Plunker、CodePen、JSBin 或类似的东西来重现问题,以便其他人可以帮助调试正在发生的事情。
  • @jme11: 马上去做一个小家伙
  • @jme11:添加了 Plunker

标签: css angularjs twitter-bootstrap angular-ui-bootstrap angular-formly


【解决方案1】:

模态模板不需要具有模态和模态对话框层 - 它们将由引导程序生成。

<script type="text/ng-template" id="popupAddCarForm.html">
    <div class="modal-header">test
        <h3 class="modal-title">Adauga masina</h3>
    </div>
    <div class="modal-body">
        <form name="vm.addCarForm">
            <formly-form model="vm.formData.model" fields="vm.formData.fields">
            </formly-form>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" type="submit" >Adauga</button>
    </div>
</script>

【讨论】:

  • fiddle 注意你需要在templateUrl中匹配你的模板id。
猜你喜欢
  • 2016-11-20
  • 1970-01-01
  • 2016-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多