角度ui-bootsrap多个对话框模式

Question

I'm trying to add multiple dialogs modals on my homepage but I may doing something wrong. 我试图在我的主页上添加多个对话框模式，但是我可能做错了什么。

I've downloading this plunker preview : Preview 我正在下载此插件预览：预览

But I have this console's error , " Error: [ng:areq] Argument 'addManagerModal' is not a function, got undefined " after adding ui-bootstrap and angular. 但是我有这个控制台的错误，“ 错误：[ng：areq]参数'addManagerModal'不是一个函数，在添加ui-bootstrap和angular后变得未定义 ”。

The code look very simple but it's not working: 该代码看起来非常简单，但无法正常工作：

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

I hope somebody can help me. 我希望有人能帮助我。

Answer 1

I think you need to add these as controllers instead of just vars using angular. 我认为您需要将这些添加为控制器，而不仅仅是使用angular的var。

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

}

Answer 2

Thanks man, 谢啦，

I've changed the js file for this : 我已经为此更改了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');
  };
});

Unfortunetly I don't any errors but I can't click on my buttons and the bootstrap.css seems to be load... 不幸的是，我没有任何错误，但是我无法单击按钮，并且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