显示控制器angular js中的模式
显示控制器angular js中的模式
提问于 2016-03-29 14:30:26
我是angular js的新手，正在尝试使用angular 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">×</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函数来显示模式。我看过很多教程，但找不到一种让它工作的方法。
谢谢。
回答 2
Stack Overflow用户
发布于 2016-03-29 14:33:48
查看Angular UI Bootstrap。它有很好的模式支持和一个可以帮助你的例子。
Stack Overflow用户
发布于 2016-03-29 15:08:00
步骤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');
}
}]);注意: Modal应为bootstrap。并且Jquery必须加载到项目中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36287293
复制相关文章
相似问题
腾讯云开发者
