Question

我使用https://angular-ui.github.io/bootstrap/#/modal，但我的模态并没有出现，只有一小部分。这是图像：

这是我的js：

＆＃13;

app.controller('PersonListController', ['$scope','ContactService','$uibModal', function($scope,ContactService,$uibModal){



  $scope.showCreateModal =function () {

      $scope.createModal = $uibModal.open({
          templateUrl: '../contact-app/templates/modal.create.tpl.html',
          bindToController: true,
          size: 'lg'
          });
  };



}]);

＆＃13;

html：＆＃39; ../ contact-app / templates / modal.create.tpl.html＆＃39; - 当我在那里检查页面但是不可见时

＆＃13;

<div class="modal fade" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Modal Title</h4>
			</div>
			<div class="modal-body">
				<ng-include src="'templates/form.html'"></ng-include>
			</div>
		</div>
	</div>
</div>

＆＃13;

当我使用常规自举模式时，它可以工作，但是当我使用有角度的方式时，它没有帮助，请帮忙！

Answer 1

看起来您正在尝试为模板使用相对网址？您应该使用以下方法：

在你的HTML中：

<script type="text/ng-template" id="modal.create.tpl.html">
  <div>
    Modal content
  </div>
</script>

然后，Angular会将模板加载到模板缓存中，您将其引用为：

templateUrl: 'modal.create.tpl.html'

Answer 2

我设法让它使用这些代码：

  $scope.createModal = $uibModal.open({
      templateUrl: '../contact-app/templates/modal.create.tpl.html',
      bindToController: true,
      scope: $scope

      });

＆＃39; ../ contact-app / templates / modal.create.tpl.html＆＃39;：

 <div class="modal-header" ng-controller="PersonListController">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">

            <ng-include src="'templates/form.html'"></ng-include>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="ok()">Close</button>
            <button type="button" class="btn btn-primary" ng-click="close()">Save changes</button>
        </div>

仍然不确定是否导致问题

Answer 3

您是否使用const Item = require('path/to/ItemSchemas'); // @route POST api/items // @desc Create An Item // @access Public router.post('/addnew', function(req, res) { const newItem = new Item({ entryDate: req.body.entryDate, leaveDate: req.body.leaveDate }); console.log(newItem); // save model to database. Since newItem hasn't been added to the db, we used Item.save instead Item.save(newItem, function(err) { if (err) { // save to db failed! res.status(500).json({ success: false, message: err }) } else { res.json({ success: true, message: 'success to post data' }) } }) });标签并将路径指向子目录下？

如果是，则您的相对路径可能不正确。

对于我来说，我使用的是<base>标签，看起来像这样

<base>

与http://abc.text.com/test/pages/index.html（我所在的位置）

已找到模板文件

<base href="http://abc.test.com/test/" />

在这种情况下，“ templateUrl”的路径必须为

'c:/web/test/contact-app/templates/modal.create.tpl.html'

因为相对路径将以

开头

  templateUrl: 'contact-app/templates/modal.create.tpl.html',

代替

http://abc.test.com/test/

角度bootstrap ui模态不显示

3 个答案: