javascript - TypeError: Cannot read property 'open' of undefined modal - Stack Overflow

admin管理员组

文章数量:1317898

I am trying to display a modal with the information of a certain item. But when I call the function it reads:

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

I was hoping someone could tell me why, here is the relevant code:

Template

<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 ponents
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'
    });       
});

Controller

'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

Can anyone point me in the right direction to fix this issue?

Thanks

---

The error is gone, but now it doesn't show anything but the grey-out screen, the console shows the modal html is loading but not displaying properly.

I am trying to display a modal with the information of a certain item. But when I call the function it reads:

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

I was hoping someone could tell me why, here is the relevant code:

Template

<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 ponents
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'
    });       
});

Controller

'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

Can anyone point me in the right direction to fix this issue?

Thanks

---

The error is gone, but now it doesn't show anything but the grey-out screen, the console shows the modal html is loading but not displaying properly.

• javascript
• html
• angularjs
• angularjs-directive

Share Improve this question Follow edited Feb 22, 2016 at 4:12 scniro 17k88 gold badges6666 silver badges107107 bronze badges asked Feb 22, 2016 at 3:30 Code GrasshopperCode Grasshopper 62011 gold badge1212 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Your injection signature is not correct. You are missing $uiModal. Observe the following...

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

=>

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

I am not totally sure the exact name of the service you are intending to inject. I guess here based on your variable that is named $uiModal, however, I notice the docs state it is $uibModal. You'll need to verify this.

---

In response to your updated newly found issue, my best observation is that templateUrl: '' and <script id=""> must match. Try changing your <script> tag to the following...

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

I stumbled upon this while playing around with the default plunker found in the docs. If both values are not the same there is an error.

本文标签： javascriptTypeError Cannot read property 39open39 of undefined modalStack Overflow