Question

我是角度js的新手，我正在尝试使用角度js创建一个简单的模态。以下是我的模态代码

<div id="sampleModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Sample Modal</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
              <h5>Name</h5>
              <input type="text" class="form-control" id="name" placeholder="Enter a name">
            </div>
            <div class="form-group">
              <div style="text-align:center;">
                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button> 
              </div>
            </div>    
        </div>
    </div>
  </div>
</div>

并在单击以下按钮

时调用上述模态

<button class="btn btn-primary" type="button" id="modal" ng-click="create()">Create</button>

我的控制器如下

var App = angular.module('myApp', []);
App.controller('homeCtrl', ['$scope',function($scope,) {
        $scope.create = function() {

         //code to show the modal
    }
    }]);

如何编写我的create函数以显示模态。我已经看过很多教程，但是找不到办法让它工作。

谢谢。

Answer 1

查看Angular UI Bootstrap。它具有出色的模态支持和一个帮助你的例子。

https://angular-ui.github.io/bootstrap/#/modal

Answer 2

步骤1：直接打开模态不与控制器交互。

<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#sampleModal">Create
    </button>

第2步：与控制器交互。

<button class="btn btn-primary" type="button" ng-click="create()">Create</button>

var App = angular.module('myApp', []); App.controller('homeCtrl', ['$scope',function($scope,) {
        $scope.create = function() {

         angular.element('#sampleModal').modal('show');
    }

}]);

N.B：模态应为bootstrap。并且必须在项目中加载Jquery。

从控制器角度js

2 个答案: