각도로 $ 모달을 주입 할 때 오류가 발생했습니다.

Question

일부 조건에 따라 모달 팝업을 열려고합니다. 그러나 아래 오류가 나타납니다. Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal at Error (<anonymous>)

아래 코드는 "ui.bootstrap"이 앱에 포함되어 있습니다.

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) { 

$scope.selectRow = function (position) { 

    $scope.changed = false; 
    if ($scope.select !== undefined && $scope.selectedRow !== position){ 
      $scope.changed = true; 
      $scope.open(); 
    } 
    $scope.select = position; 
}; 


$scope.open = function() { 
    console.log('Opening modal'); 
    var modalInstance = { 
     templateUrl: 'modal.html', 
     dialogClass: 'modal-selection', 
     controller: ModalInstanceCtrl 
    }; 
    $modal.open(modalInstance); 
}; 


var ModalInstanceCtrl = function ($modalInstance) { 

    $scope.ok = function() { 
     $modalInstance.close(); 
    }; 

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

내 HTML : 각 웹 사이트에서

<div id="modal-select" > 
    <h3> 
     Choose appropriate change 
    </h3> 
    <div> 
     <ul> 
      <li><a href="#">Change 1</a></li> 
      <li><a href="#">Change 2</a></li> 
      <li><a href="#">Change 3</a></li> 
      <li><a href="#">Change 4</a></li> 
     </ul> 
    </div> 
    <div> 
     <button class="button" ng-click="cancel()"> 
      Cancel 
     </button> 
     <button class="button" ng-click="ok()"> 
      Done 
     </button> 
    </div> 
</div> 

Answer 1

오류였다. 0.6.0으로 업데이트하고 이것을 포함하도록 응용 프로그램을 다시 빌드하면 문제가 해결되었습니다. 단순히 $ modal.open ({... $ scope.modalInstance에 변수를 추가하여

Answer 2

: This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example

당신이 당신의 현재 모듈에 대한 종속성으로 'ui.bootstrap'을해야합니까?

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) 

는해야합니다 내가 0.5.0를 ui.bootstrap했기 때문에

angular.module('myApp', ['ui.bootstrap']).controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) 

Answer 3

나는이 문제를 해결한다.

(function() { 
var app = angular.module('app'); 

app.controller('ModalCtrl', [ 
    '$scope', '$modal', function ($scope, $modal) { 
     $scope.modalInstance = {}; 
     $scope.open = function() { 
      $scope.modalInstance = $modal.open({ 
       templateUrl: 'Template id goes here', 
       controller: 'ModalInstanceCtrl' 
      }); 
     }; 

    } 
]); })(); 

을 'ModalInstanceCtrl'

(function() { 
var app = angular.module('app'); 

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) { 
     $scope.submit = function (myForm) { 
      //submit code goes here 
     }; 

     $scope.cancel = function() { 
      $modalInstance.close(); 
     }; 
    } 
); })();