Question

为了研究角度js，我创建了一个用于执行CRUD操作的角度应用程序。我想在我的应用程序中添加模态表单。因此，当用户单击以添加项目弹出模式窗体时。为此，我使用了角度ui的bootstrap。我尝试使用ui bootstrap教程中的代码http://plnkr.co/edit/dRahuG?p=preview。它在plunker中工作正常但不适用。

<div class="container" ng-controller="ClassController">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>User name</label>
            <input type="text" ng-model="user.user" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>
    <button class="btn" ng-click="open()">Add</button>
    <div ng-show="selected">aSelection from a modal: {{ selected }}</div>
</div>

我的控制器是

var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('ClassController',['$scope','$http','$modal','classFactory',function($scope,$http,$modal){

      $scope.items = ['item1', 'item2', 'item3'];

    $scope.open = function () {

        $modal.open({
            templateUrl: 'myModalContent.html',
            backdrop: true,
            windowClass: 'modal',
            controller: function ($scope, $modalInstance) {

                $scope.submit = function () {

                    $modalInstance.dismiss('cancel');
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            },
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
    };

}])

当我点击按钮时，屏幕会变暗但模态形式不会出现。我不知道我哪里出错了。我正在使用sails.js来加载服务器。而且我是角度js的初学者。

Angular ui模态形式不显示形式

0 个答案: