未知提供者：$modalInstanceProvider <- $modalInstance

Question

我正在尝试像这样使用 angularui-bootstrap 调用模态。

var authApp = angular.module('AuthApp', ['ui.bootstrap']);
authApp.controller('AuthController',
 ['$scope', '$uibModal',
 function ($scope, $uibModal) {
     //$scope.credentials = {
     //    userName: "",
     //    uPassword: "",
     //    rememberMe: ""
     //};
     $scope.OpenLoginModal = function (templateUrl) {
         var modalInstance = $uibModal.open({
             animation: false,
             backdrop: 'static',
             templateUrl: templateUrl,
             controller: 'loginModalController'//,
             //resolve: {
             //    credentials: function () {
             //        return $scope.credentials;
             //    }
             //}
         });
     };
 }]);

authApp.controller('loginModalController',
 ['$scope', '$modalInstance', 'AuthService',
 function ($scope, $modalInstance, AuthService) {
     //$scope.credentials = credentials;
     //$scope.headerTitle = 'Login Information';

     $scope.LoginUser = function () {
         //var data = {};
         //console.log($scope.credentials);
         AuthService.ValidateServerAccessDetails(data).then(function (response) {
             //$modalInstance.close(response.data);
         }, function (response) {
             //$scope.userName = "";
             //$scope.passWord = "";
         });
     };

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

我收到了这个错误，

错误：[$injector:unpr] 未知提供者：$modalInstanceProvider

我在 Plunker 中也遇到同样的错误：https://plnkr.co/edit/3rmapgrLhYJ3plyPWm87

我做错了什么？ 使用的版本是 angularjs-1.4.7 和 angularui-1.1.2

P.S：我在这里检查了很多答案。接近的问题之一就是这个。 Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

Answer 1

尝试将依赖项更改为$uibModalInstance，如documentation 中的示例中使用的那样。你的控制器看起来像：

authApp.controller('loginModalController', [
    '$scope', '$uibModalInstance', 'AuthService',
     function ($scope, $uibModalInstance, AuthService) {
        // implementation
    }

Answer 2

谢谢。当我注入“$modalInstance”时遇到了一些问题。现在我将其更改为 $uibModalInstance 并在我的模态模板中删除 ng-controller。成功了！

当我遇到问题时，我的代码如下：

//======================navController=============================
app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) {
    $scope.loginDialog = function() {
        var modalInstance = $uibModal.open({
            templateUrl: 'views/login.html',
            controller: 'loginController',
        })

    };
});
//======================loginController=============================
app.controller('loginController', function($http, $scope, $modalInstance, $rootScope, $location) {

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

    //http://angular-ui.github.io/bootstrap/#/modal
    $scope.submit = function() {
        console.log("input user = >" + JSON.stringify($scope.user))
        $http({
            method: 'POST',
            url: '/auth/login',
            data: $scope.user
        }).then(function successCallback(response) {
            console.log(response)
            console.log(response.data.message)
            console.log(response.data.state)
            console.log(response.data.user)
            if (response.data.user === null) {
                $rootScope.isAuthenticated = false;
                $modalInstance.dismiss('cancel')
            } else {
                $rootScope.isAuthenticated = true;
                $modalInstance.dismiss('cancel')
            }
        }, function errorCallback(err) {
            console.log(err)
            $modalInstance.dismiss('cancel')
            $location.path('/error')
        });
    }

});


<form class="form-signin" id="loginForm" ng-model="user" ng-controller="loginController">
    <div style="margin:5px">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button>
        <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button>
    </div>
</form>
<!-- /container -->
<script>
$.validator.setDefaults({
    submitHandler: function() {
        alert('start signing...')
    }
});
$().ready(function() {
    $("#loginForm").validate();
});
</script>

然后我把它改成如下：

//======================navController=============================
app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) {
    $scope.loginDialog = function() {
        var modalInstance = $uibModal.open({
            templateUrl: 'views/login.html',
            controller: 'loginController',
        })

    };
});
//======================loginController=============================
app.controller('loginController', function($http, $scope, $uibModalInstance, $rootScope, $location) {

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

    //http://angular-ui.github.io/bootstrap/#/modal
    $scope.submit = function() {
        console.log("input user = >" + JSON.stringify($scope.user))
        $http({
            method: 'POST',
            url: '/auth/login',
            data: $scope.user
        }).then(function successCallback(response) {
            console.log(response)
            console.log(response.data.message)
            console.log(response.data.state)
            console.log(response.data.user)
            if (response.data.user === null) {
                $rootScope.isAuthenticated = false;
                $uibModalInstance.dismiss('cancel')
            } else {
                $rootScope.isAuthenticated = true;
                $uibModalInstance.dismiss('cancel')
            }
        }, function errorCallback(err) {
            console.log(err)
            $uibModalInstance.dismiss('cancel')
            $location.path('/error')
        });
    }

});


<form class="form-signin" id="loginForm" ng-model="user">
    <div style="margin:5px">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button>
        <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button>
    </div>
</form>
<!-- /container -->
<script>
$.validator.setDefaults({
    submitHandler: function() {
        alert('start signing in...')
    }
});
$().ready(function() {
    $("#loginForm").validate();
});
</script>

删除模态模板中的“ng-controller”并使用 $uiModalInstance 解决了我的问题。