【发布时间】: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