在角度注入$模態時出錯

我想根據某些條件打開模式彈出窗口。不過，我得到以下錯誤 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>

來源

2013-12-13 Priyabrat Nanda

錯誤是因爲我已經ui.bootstrap 0.5.0。我更新到0.6.0並重建應用程序以包含此問題，並解決了該問題。

來源

2013-12-13 23:10:43

從角網站： 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)

應該是：

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

來源

2013-12-13 22:13:44

ui.bootstrap是已經添加到父app.js文件中，原因是舊版本的ui.bootstrap。感謝您的意見。 –

@Oleg - 這完全正確！只要我將它添加到我的模塊，它就完美了！ – webdad3

我解決這個問題，通過簡單地追加$ modal.open（{...到$ scope.modalInstance變量。

(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(); 
     }; 
    } 
); })();

來源

2014-09-04 13:21:58

在角度注入$模態時出錯

回答

相關問題