angular ui引导srap多对话框模式

angular ui-bootsrap multiple dialogs modal

本文关键字：对话框 模式 srap ui 引导 angular      更新时间：2023-09-26

我试图在主页上添加多个对话框模式，但我可能做错了什么。

我已经下载了这个plunker预览：预览

但我有这个控制台的错误，"错误：[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');
  };
};

我希望有人能帮我。

我认为您需要将这些添加为控制器，而不仅仅是使用angular的vars。

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

谢谢伙计，

我已经为此更改了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');
  };
});

不幸的是，我没有任何错误，但我无法点击我的按钮，引导程序.css似乎已加载。。。

相关文章：