Question

H ieveryone，请帮助我做这个技巧并使我的模态工作......我正在尝试创建一个模态来编辑用户帐户的详细信息。为了在我的标题中，我添加到视图中：

HeaderView.html：

<li class="dropdown" dropdown>
    <a href="javascript:;" class="dropdown-toggle" dropdown-toggle>
      <span>
        {{user.username}}
      </span>
    </a>
    <ul class="dropdown-menu">  
      <li>
        <a ng-click="openUserSettings()">Settings</a>
      </li>    
      <li>
        <a ng-click="logout()">Logout</a>
      </li>
    </ul>
  </li>

在headerController中：

controllerScope.openUserSettings = function () {
            $state.go('app.userSettings');
        };

在我的usersController中：

app.controller('UsersSettingsController',
               ['$scope', '$modalInstance', 'user', 
               function ($scope, $modalInstance, user) {

        $scope.open = function () {

            var modalInstance = $modal.open({
              templateUrl: 'editAccount.html',
              controller: 'UsersSettingsModalInstanceController'      
            });
        };
    }]);

    // Please note that $modalInstance represents a modal window (instance) dependency.
    // It is not the same as the $modal service used above.
    app.controller('UsersSettingsModalInstanceController',
                   ['$scope', '$modalInstance', 
                   function ($scope, $modalInstance) {

        $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
    }]);

editAccount.html

<div ng-controller="UsersSettingsModalInstanceController">
    <script type="text/ng-template" id="editAccount.html">  
    <div class="modal-header">
      <h3>Edit Profile</h3>
    </div>
    <div class="modal-body">
        <div class="row">             
          <!-- edit form column -->
          <div class="col-md-9 personal-info">
            <h3>Personal info</h3>

            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label class="col-md-3 control-label">Username:</label>
                <div class="col-md-8">
                  <input class="form-control" type="text" value="monitorUser2@carris">
                </div>
              </div>
              <div class="form-group">
                <label class="col-lg-3 control-label">Organization:</label>
                <div class="col-lg-8">
                  <input class="form-control" type="text" value="carris">
                </div>
              </div>
              <div class="form-group">
                <label class="col-lg-3 control-label">Permission Group:</label>
                <div class="col-lg-8">
                  <input class="form-control" type="text" value="Monitor">
                </div>
              </div>
              <div class="form-group">
                <label class="col-lg-3 control-label">Email:</label>
                <div class="col-lg-8">
                  <input class="form-control" type="text" value="monitorUser2@carris">
                </div>
              </div>
              <hr>
              <h4>Change Password</h4>
              <br>
              <div class="form-group">
                <label class="col-md-3 control-label">Change Password:</label>
                <div class="col-md-8">
                  <input class="form-control" type="password" value="11111122333">
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Confirm password:</label>
                <div class="col-md-8">
                  <input class="form-control" type="password" value="11111122333">
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label"></label>
                <div class="col-md-8">
                  <input type="button" class="btn btn-primary" value="Save Changes">
                  <span></span>
                  <input type="reset" class="btn btn-default" value="Cancel">
                </div>
              </div>
            </form>
          </div>
      </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</div>

最后我的app.routes文件

.state('app.userSettings', {
          url: '/allusers/settings/',
          templateUrl: 'app/components/users/editAccount.html',
          resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load([
                {
                  insertBefore: '#load_styles_before',
                  files: ['assets/libs/chosen_v1.4.0/chosen.min.css',
                    'assets/libs/datatables/css/jquery.dataTables.css']
                },
                { serie: true,
                  files: [
                    'assets/libs/chosen_v1.4.0/chosen.jquery.min.js',
                    'assets/libs/datatables/js/jquery.dataTables.js',
                    'assets/libs/bootstrap-datatables/bootstrap-datatables.js'
                  ]}]).then(function () {
                    return $ocLazyLoad.load([
                      {
                        files: ['app/components/users/usersController.js',
                            'app/shared/layout/utils.js']
                      }
                    ])
                  });
            }]
          },
          data: {
            title: 'Settings',
          }
        })

所以我在“logout”选项上面的标题中添加了一个新选项，用户可以在其中更改配置文件信息。为此，当他点击“设置”时，它会弹出一个新的模态，他可以在那里更改信息。但是我在注入模态实例控制器时遇到了麻烦。

当我点击“设置”时，我得到了

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- UsersSettingsModalInstanceController

Answer 1

将ModuleInstance注入角度模块。

var MyApp = angular.module("MyController", ['$scope', '$uibModal', 'ui-bootstrap', '$etc', '$etc', '$etc', function($scope, $uibModal, $etc, $etc, $etc)]);

Answer 2

在创建模块时，需要调用ui bootstrap模块：

var app = angular.module('wavesys.app.routes', ['ui.bootstrap']);

从doc（https://angular-ui.github.io/bootstrap/）

中提取

<强>安装

只要您下载了所有文件并将其包含在您的页面中，您就需要声明对ui.bootstrap模块的依赖：

angular.module('myModule', ['ui.bootstrap']);

未知提供者：$ modalInstanceProvider＆lt; - $ modalInstance＆lt; - UsersSettingsModalInstanceController

2 个答案: