Question

我想在项目中添加模型对话框。

我的HTML代码如下：

<div ng-controller="bodyController">
    <!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
        <button class="btn" ng-click="open()">Open Modal</button>

    <div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>

    </div>

我的app.js是这样的：

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("bodyController", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

我在index.html文件中添加了角度UI Bootstrap JS。我没有得到模型对话框。我收到了一个错误。

我的错误就像：

任何人都可以建议我如何解决此错误。

Answer 1

这是bootstrap模式的示例。我想你在没有使用bootstrap类的地方尝试的方式

您的代码中存在相当多的问题，因此请更好地尝试示例并根据需要进行开发

<button data-toggle="modal" data-target="#test">CLick</button>
<div class="modal fade" id="test" role="dialog">
            <div class="modal-dialog">
                    <div class="modal-content">
                    </div>
            </div>
</div>

Answer 2

请参阅下文..这将对您有所帮助。

＆＃13;

function customtheme_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Sidebar', 'customtheme' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Add widgets here to appear in your sidebar.', 'customtheme' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
) );

＆＃13;

var app = angular.module("MyApp", ["ui.bootstrap"]);

app.controller("bodyController", function($scope,$uibModal) {

  $scope.open = function() {    

    var modalInstance = $uibModal.open({
      animation:true,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      template: `<div modal="showModal" close="cancel()">
      <div class="modal-header">
          <h4>Modal Dialog</h4>
      </div>
      <div class="modal-body">
          <p>Example paragraph with some text.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </div>`,
    size: 'sm', 
    controller:'modalCtrl',
      resolve: {
        items: function () {
         // return $ctrl.items;
        }
      }
    });
    modalInstance.result
    .then(function (result) {
            	console.log('okay');			
			},
			function (result) {
				console.log('cancel');
			});

  }; 

});
app.controller('modalCtrl', function($scope,$uibModalInstance){
 $scope.ok = function() {
 $uibModalInstance.close();
 };
 $scope.cancel = function() {
   $uibModalInstance.dismiss();
  };
});

＆＃13;

在角度js中打开模型对话框时出错

2 个答案: