TypeError：無法讀取未定義模態的屬性'open'

Question

我正在嘗試顯示某個項目的信息的模態。但是，當我調用該函數讀取：

TypeError: Cannot read property 'open' of undefined at Scope.$scope.openModal

我希望有人能告訴我爲什麼，這裏是有關的代碼：

模板

<div ng-controller="View1Ctrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">Item Details</h3> 
     </div> 
     <div class="modal-body"> 
      <ul ng-repeat="i in items"> 
       <li>Type: <span ng-bind="i.type"></span></li> 
       <li>Description: <span ng-bind="i.description"></span></li> 
       <li>Date: <span ng-bind="i.createDate"></span></li> 
       <li>Priority: <span ng-bind="i.priority"></span></li> 
       <li>Finished: <span ng-bind="i.isDone"></span></li> 
      </ul> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="$close()">OK</button> 
     </div> 
    </script> 
</div> 

App.Js

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('myApp', [ 
    //'ngRoute', 
    'ui.router', 
    'ui.bootstrap', 
    'myApp.view1', 
    'myApp.view2', 
    'myApp.version', 
    'myApp.items' 
]) 
.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/view1'); 

    $stateProvider 
    .state('view1', { 
     url: '/view1', 
     templateUrl: 'view1/view1.html', 
     controller: 'View1Ctrl' 
    }) 
    .state('view2', { 
     url: '/view2', 
     templateUrl: 'view2/view2.html', 
     controller: 'View2Ctrl' 
    });  
}); 

控制器

'use strict'; 

angular.module('myApp.view1', ['ngRoute']) 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
     templateUrl: 'view1/view1.html', 
     controller: 'View1Ctrl' 
    }); 
}]) 
.controller('View1Ctrl', ['$scope','itemsService',function($scope,itemsService, $uiModal) { 

    $scope.$on('itemSwitch.moreInfo', function(event, obj){ 
     $scope.openModal(obj); 
    }); 

    $scope.openModal = function (obj) { 

     var modalInstance = $uiModal.open({ 
      animation: $scope.animationsEnabled, 
      templateUrl: 'templates/modalTemplate.html', 
      controller: 'View1Ctrl', 
      resolve: { 
       items: function() { 
        return obj; 
       } 
      } 
     }); 
    } 
}]); //END 

任何人都可以點我在正確的方向來解決這個問題？

感謝

---

錯誤走了，但現在不顯示任何東西，但灰色的出屏，控制檯顯示HTML模式加載但不能正確顯示。

Answer 1

你注射的簽名是不正確的。您缺少$uiModal。遵守以下...

.controller('View1Ctrl', ['$scope', 'itemsService', 
    function($scope, itemsService, $uiModal) { 

=>

.controller('View1Ctrl', ['$scope', 'itemsService', '$uiModal', 
    function($scope, itemsService, $uiModal) { 

我不能完全確定你打算注入的服務的確切名稱。我想這裏根據您的變量即名爲$uiModal，但是，我注意到docs狀態它是$uibModal。你需要驗證這一點。

---

針對更新後的新發現的問題，我的最好的觀察是templateUrl: ''和<script id="">必須比賽。試着改變你的<script>標籤下面...

<script type="text/ng-template" id="templates/modalTemplate.html"> 
    <!-- <div> --> 

我在此與同時，在文檔中發現的default plunker玩耍摔倒了。如果兩個值都不相同，則會出現錯誤。