I have problem with an angular modal service
My app.js includes:
angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...
test.js:
'use strict';
angular.module('myApp.test', ['angularModalService'])
.controller('ComplexController', [
'$scope', '$element', 'title', 'close',
function($scope, $element, title, close) {
$scope.name = null;
$scope.age = null;
$scope.title = title;
// This close function doesn't need to use jQuery or bootstrap, because
// the button has the 'data-dismiss' attribute.
$scope.close = function() {
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
// This cancel function must use the bootstrap, 'modal' function because
// the doesn't have the 'data-dismiss' attribute.
$scope.cancel = function() {
// Manually hide the modal.
$element.modal('hide');
// Now call close, returning control to the caller.
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
}]);
And then test.html
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<p>Here's a more complex modal, it contains a form, data is passed to the controller
and data is returned from the modal.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">OK</button>
<button type="button" ng-click="cancel()" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
And the main page that opens modal windows
'use strict';
angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/ricetta2', {
templateUrl: 'views/ricetta/ricetta2.html',
controller: 'CartForm'
});
}])
.controller('CartForm', ['$scope','ModalService', function($scope, ModalService) {
$scope.invoice = {
items: [{
qty: 10,
description: 'Pomodori',
cost: 'Kg'}, {
qty: 10,
description: 'Olio',
cost: 'litri'}, {
qty: 4,
description: 'Pasta',
cost: 'Kg'}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: ''
});
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
});
return total;
};
$scope.items = ['item1', 'item2', 'item3'];
$scope.productList = [];
$scope.showComplex = function() {
ModalService.showModal({
templateUrl: "views/test/test.html",
controller: "ComplexController",
inputs: {
title: "A More Complex Example"
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.complexResult = "Name: " + result.name + ", age: " + result.age;
});
});
};
}]);
When I try to open Modal windows I have always an error on the page:
TypeError: modal.element.modal is not a function at ricetta2.js:60 at processQueue (angular.js:13248) at angular.js:13264 at Scope.$get.Scope.$eval (angular.js:14466) at Scope.$get.Scope.$digest (angular.js:14282) at Scope.$get.Scope.$apply (angular.js:14571) at done (angular.js:9698) at completeRequest (angular.js:9888) at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) @ angular.js:11655$get @ angular.js:8596processQueue @ angular.js:13256(anonymous function) @ angular.js:13264$get.Scope.$eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829
I have all the resources linked on the index.html:
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
I'm very new to angularjs and I don't know the solution!!
Thanks all
app.jsyou are missing a comma between two of the dependenciessmart-table''angularModalService',– Aaron