Javascript 显示来自控制器的模式

我是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">&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>

我应该如何编写create函数以显示模态。我看过很多教程，但找不到一种方法让它工作

---

谢谢。

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

---

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

---

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

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

<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');
    }

}]);

创建

步骤2：与控制器交互

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

<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');
    }

}]);

创建
var-App=angular.module（'myApp'，[]）；App.controller（'homeCtrl'，['$scope'，函数（$scope，）{
$scope.create=function（）{
角度元素（'#sampleModal'）。模态（'show'）；
}
}]);

---

注意：模式应该是

bootstrap

。和

Jquery

必须加载到项目中。

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

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

<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');
    }

}]);

创建

步骤2：与控制器交互

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

<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');
    }

}]);

创建
var-App=angular.module（'myApp'，[]）；App.controller（'homeCtrl'，['$scope'，函数（$scope，）{
$scope.create=function（）{
角度元素（'#sampleModal'）。模态（'show'）；
}
}]);

---

注意：模式应该是

bootstrap

。而且

Jquery

必须加载到项目中。

我尝试了您建议的答案，它给我的错误是：jqLite:nosel Error。您的项目是否包含Jquery。。。如果没有，那么注入它和tryYeah我得到了它在angular脚本中包含上面的Jquery，然后尝试，我尝试我的PC，除了Jquery，它显示了您的（错误：jqLite:nosel）。那么，有没有一种方法可以在没有bower的情况下包含这些js文件呢？我在安装bowerYeah时遇到问题。这是可能的，下载jquery然后设置路径，或者您可以使用jquery cdnfy…我尝试了您建议的答案，它给了我错误：jqLite:nosel Error。您的项目包括jquery吗。。。如果没有，那么注入它和tryYeah我得到了它在angular脚本中包含上面的Jquery，然后尝试，我尝试我的PC，除了Jquery，它显示了您的（错误：jqLite:nosel）。那么，有没有一种方法可以在没有bower的情况下包含这些js文件呢？我在安装bowerYeah时遇到问题。有可能，下载jquery然后设置路径，或者您可以使用jquery cdnfy。。。