angularjs模态初始化使用工厂

时间:2015-06-06 14:13:33

标签: angularjs twitter-bootstrap

尝试使用app.factory在控制器中打开模态窗口。

得到奇怪的错误,不明白是什么问题。 所以,这是我在js控制台中遇到的错误:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=modalServiceProvider%20%3C-%20modalService%20%3C-%20MapController

这是我的文件和结构:

主控制器:

app.controller('MainController', ['$scope', 'modalService', function($scope, modalService){    
    ///Modal: Add item
    //////////////////
    console.log('dfdfdf');
    $scope.AddItem = modalService.openAddItemDialog($scope);
    }]);

在简单的HTML上打开它:

<div ng-controller="MainController">
    <button type="button" class="btn btn-block" ng-click="AddItem()">  </button>
</div>

工厂:

app.factory('modalService', ['$modal', function($modal) {

    function openAddItemDialog($scope) {
        console.log('dfdfdf');
        $scope.animationsEnabled = true;
        $scope.valueToPass = "I must be passed";

        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'AddItemDialog.html',
            controller: 'AddItemController',
            resolve: {
                aValue: function () {
                    return $scope.valueToPass;
                }
            }
        });
        modalInstance.result.then(function (paramFromDialog) {
            $scope.paramFromDialog = paramFromDialog;
        });
    }

    return {
        openAddItemDialog: openAddItemDialog
    };
}]);

模态控制器:

app.controller('AddItemController',function($scope, $modalInstance, aValue) {
    $scope.valuePassed = aValue;
    $scope.close = function () {
        $modalInstance.close("Someone Closed Me");
    };
});

HTML模板:

<div class="modal-header">
    <h2>The title</h2>
</div>
<div class="modal-body">
    The body of the dialog with the value to pass '{{valuePassed}}'
</div>
<div class="modal-footer">
    <button class="btn" ng-click="close()">Close</button>
</div>

我甚至没有看到第一个console.log('dfdfdf'); func结果。所以它在某种程度上打破了主控制器的工作..但是盲目,不能se,是什么问题?对我来说,看起来一切都应该有用。

** app在单独的文件中定义,例如var app = angular.module('MainPage', ['ui.bootstrap']);

1 个答案:

答案 0 :(得分:0)

您是否可以仔细检查您是否已将服务文件包含在应用页面中?
您可以找到有关此错误的更多信息here