显示控制器angular js的模态

Displaying the modal from the controller angular js

本文关键字：模态 js angular 控制器 显示      更新时间：2023-09-26

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

<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函数来显示模态。我看过很多教程，但找不到一种方法让它发挥作用。

谢谢。

查看Angular UI引导程序。它有很好的模态支持和一个示例来帮助您。

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

步骤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。并且CCD_ 2必须在项目中加载。

相关文章：