u-6ren">
个人中心
gpt4 book ai didi

javascript - $modal 的 Angular 注入(inject)器错误

转载 作者：行者123 更新时间：2023-11-30 09:47:54 27 4
gpt4 key购买 nike

我正在尝试使用 ui.bootstrap 中的 $modal 依赖项创建模态。我在第二个 li 中从 ng-click="showModal() 调用 $modal.open({...}) 方法> ul 中的元素，类为 nav-list。

尽管当我在下面使用括号运行此 index.html 时，我收到一条错误消息:

Error: [$injector:unpr]
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ModalController

这里是代码的概述(非常抱歉，它太长了!):

下面是我的 index.html 代码:

<html lang="en">
    <head>
        <title>App</title>

        <script src="../vendors/js/angular.min.js"></script>
        <script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
        <script src="../resources/js/app.js"></script>
    </head>

    <body ng-app="App">
        <header>
            <nav>
                <div class="row" ng-controller="ModalController">
                    <img src="../resources/img/logos.png" alt="logo" class="logo">
                    <ul class="nav-list">
                        <li><a href="#" class="learn-more-link">Learn More</a></li>
                        <li><a href="#" class="login-button-link" ng-click="showModal()">Login</a></li>
                    </ul>
                </div>
            </nav>
         </header>
    </body>
</html>

这是我的 app.js:

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

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
    $scope.showModal = function() {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: '../HTML/templates/login-modal.html',
            controller: 'newModalController',
            resolve: {}
        });
    };
}]);

app.controller('newModalController', function($scope, $uibModalInstance) {
    $scope.test = "Testing";
});

现在这是我的模板(在 $modal.open({...}) 方法的 templateURL 键中传递):

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <script src="../resources/js/app.js"></script>
    </head>

    <body ng-app="App" ng-controller="newModalController">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2"> 
                <form name="userForm" ng-submit="submitToFB(userForm.$valid)" novalidate>
                    <div class="form-group">
                        <label><span class="glyphicon glyphicon-user"></span> Email</label>
                        <input type="text" name="email" class="form-control" ng-model="email" placeholder="Email" required>
                    </div>

                    <div class="form-group">
                        <label><span class="glyphicon glyphicon-eye-open"></span> Password</label>
                        <input type="text" name="password" class="form-control" ng-model="password" placeholder="Enter Password" required>
                    </div>

                    <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
                </form>
            </div>
        </div>
    </body>
</html>

最佳答案

ui-bootstrap模态服务，您可以使用它打开和控制模态，称为 $uibModal .替换你的 $modal有了这个。

这里是 ui-bootstrap模态示例:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

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

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.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;
  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').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');
  };
});

更新:模态实例模板 (login-modal.html) 应该只包含带有根 <div> 的正文内容, 组件模板中不需要脚本标签。

关于javascript - $modal 的 Angular 注入(inject)器错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38035472/

27 4 0
文章推荐： python - Conv2D模型的训练卡住了[MNIST数据集]
文章推荐： Python 监督 ML 文本以概率分类为不同类别
文章推荐： machine-learning - 决策边界不是分类中训练数据的属性
文章推荐： java - 遍历自定义链表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com