각도 부트스트랩모달:알 수 없는 공급자: $modal인스턴스 프로바이더

각도 부트스트랩모달:알 수 없는 공급자: $modal인스턴스 프로바이더

컨트롤러에서 Angular Bootstrap Modal 디렉티브(http://angular-ui.github.io/bootstrap/)를 사용하여 모드를 열려고 합니다.

function customerSearch() {
    var modalInstance = $modal.open({
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    });

    modalInstance.result.then(function(selectedCustomer) {
        console.log(selectedCustomer);
    });
}

모드 컨트롤러:

var controllerId = 'customers.modal';

angular.module('app').controller(controllerId,
    ['$modalInstance', customersModal]);

function customersModal($modalInstance) {
    // Modal controller stuff
}

그러나 이 경우 다음과 같은 오류가 발생합니다.

Unknown provider: $modalInstanceProvider <- $modalInstance

내가 꺼내면$modalInstance동작합니다만, 발신측 컨트롤러의 모달에 대한 참조는 없습니다.

편집

주의할 필요가 있을지는 모르겠지만 Controller As 구문을 사용하고 있습니다.

<div class="container-fluid" data-ng-controller="customers.modal as vm">

응용 프로그램 종속성:

var app = angular.module('app', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute',          // routing
    'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)

    // Custom modules 
    'common',           // common functions, logger, spinner
    'common.bootstrap', // bootstrap dialog wrapper functions

    // 3rd Party Modules
    'ui.bootstrap',      // ui-bootstrap (ex: carousel, pagination, dialog)
    'breeze.directives', // breeze validation directive (zValidate)
]);

문제를 나타내는 plunker를 만들었습니다.http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

문제는 모달 열기 및 템플릿 내부 2곳에서 컨트롤러를 지정하고 있다는 것입니다.이 컨트롤러는 필요 없습니다.템플릿에서 ng-controller를 삭제하면 정상적으로 동작합니다.http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

먼저 이 구문을 사용해 보세요.

angular.module('app').controller('customers.modal',
    ['$modalInstance', function($modalInstance){
// Modal controller stuff
}]);

대괄호 표기법을 사용하여 컨트롤러를 외부에 선언하면 엉망이 될 것 같습니다.

$modalInstance는 여기서 작성하는 modalInstance입니다.

var modalInstance = $modal.open({
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    });

정말 같은 물건이에요.컨트롤러에 다시 주입되지만 서비스/공장은 아닙니다.프로바이더가 없습니다.

이것은 lib에서 까다로운 부분이다.ui-bootstrap의 원저작자에게 문의해 주십시오.그들은 그것을 설명하는 데 도움이 되었다.

언급URL : https://stackoverflow.com/questions/21020715/angular-bootstrap-modal-unknown-provider-modalinstanceprovider