$ modal的角度噴射器錯誤

Question

我正在嘗試使用ui.bootstrap的$modal依賴關系創建一個模式。 我正在使用類nav-list從ul的第二個li元素中的ng-click="showModal()調用$modal.open({...})方法。

盡管當我使用方括號在下面運行此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>

Answer 1

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>的主體內容，而不需要組件模板中的腳本標簽。

$ modal的角度噴射器錯誤

問題描述

1 個解決方案

解決方案1
4 2016-06-26 05:27:13

$ modal的角度噴射器錯誤

問題描述

1 個解決方案

解決方案1 4 2016-06-26 05:27:13

解決方案1
4 2016-06-26 05:27:13