角度ui-bootsrap多個對話框模式

Question

我試圖在我的主頁上添加多個對話框模式，但是我可能做錯了什么。

我正在下載此插件預覽：預覽

但是我有這個控制台的錯誤，“ 錯誤：[ng：areq]參數'addManagerModal'不是一個函數，在添加ui-bootstrap和angular后變得未定義 ”。

該代碼看起來非常簡單，但無法正常工作：

HTML：

<!DOCTYPE html>
<html ng-app='modalviews'>

<head>
    <title> My app title</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
        <div class="span12" style="background-color:">
            <div class="span2 nav1" style="background-color:#EFEFEF">
                <ul style="padding:45px 0px 10px 5px">
                    <div ng-controller="addManagerModal">
                        <script type="text/ng-template" id="addManager.html">
                            <div class="modal-header">
                            <h3>I'm a modal!'</h3>
                            </div>
                            <div class="modal-body">
                            hii this is manager

                            </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>
                        </script>
                        <a ng-click="open()">Add Manager</a>
                    </div>

                    <div ng-controller="addCaptainModal">
                        <script type="text/ng-template" id="addCaptain.html">
                            <div class="modal-header">
                            <h3>I'm a modal!'</h3>
                            </div>
                            <div class="modal-body">
                            hii this is captain

                            </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>
                        </script>

                        <a ng-click="open()">Add Captain</a>
                    </div>
                </ul>
            </div>
        </div>
        <script src="../bower_components/angular/angular.js"></script>
        <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
        <script src="modal.js"></script>
</body>
</html>

JAVASCRIPT：

angular.module('modalviews',  ['ui.bootstrap']);
// add manager Modal
var addManagerModal = function($scope, $modal) {
    $scope.open = function () {
      var modalInstance = $modal.open({
      templateUrl: 'addManager.html',
      controller: ModalInstanceCtrl});
};



};

var ModalInstanceCtrl = function ($scope, $modalInstance) {

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

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


//add Captain modal

var addCaptainModal = function($scope, $modal) {
    $scope.open = function () {
      var captainModalInstance = $modal.open({
      templateUrl: 'addCaptain.html',
      controller: captainModalInstanceCtrl});
};



};

var captainModalInstanceCtrl = function ($scope, $modalInstance) {

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

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

我希望有人能幫助我。

Answer 1

我認為您需要將這些添加為控制器，而不僅僅是使用angular的var。

angular.module('modalviews')
  .controller('addManagerModal', function($scope, $modal) {
...

}

Answer 2

謝啦，

我已經為此更改了js文件：

    'use strict';

angular.module('weShareApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('weShareApp').controller('loginModalCtrl', function ($scope, $uibModal, $log) {

  $scope.items = [];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'loginModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };
});

angular.module('weShareApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

不幸的是，我沒有任何錯誤，但是我無法單擊按鈕，並且bootstrap.css似乎已加載...

角度ui-bootsrap多個對話框模式

問題描述

2 個解決方案

解決方案1
0 2015-11-23 16:56:33

解決方案2
0 2015-11-23 17:28:24

角度ui-bootsrap多個對話框模式

問題描述

2 個解決方案

解決方案1 0 2015-11-23 16:56:33

解決方案2 0 2015-11-23 17:28:24

解決方案1
0 2015-11-23 16:56:33

解決方案2
0 2015-11-23 17:28:24