我正在尝试显示带有特定项目信息的模态。但是当我调用函数时,它显示:
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'
});
});
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
谁能指出解决此问题的正确方向?
谢谢
错误消失了,但现在除了灰色屏幕外什么也没有显示,控制台显示模态 html 正在加载但显示不正确。
最佳答案
您的注入(inject)签名不正确。你不见了$uiModal
.观察以下...
.controller('View1Ctrl', ['$scope', 'itemsService',
function($scope, itemsService, $uiModal) {
=>
.controller('View1Ctrl', ['$scope', 'itemsService', '$uiModal',
function($scope, itemsService, $uiModal) {
我不完全确定您要注入(inject)的服务的确切名称。我猜这里基于你的名为 $uiModal
的变量 ,但是,我注意到 docs声明它是$uibModal
.您需要对此进行验证。
针对您最新发现的问题,我最好的观察是 templateUrl: ''
和 <script id="">
必须匹配。尝试更改您的 <script>
标记到以下...
<script type="text/ng-template" id="templates/modalTemplate.html">
<!-- <div> -->
我在玩 default plunker 时偶然发现了这个在文档中找到。如果两个值不相同,则会出现错误。
关于javascript - 类型错误 : Cannot read property 'open' of undefined modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35545356/