I have opened modal with ng-click inside controller on the same URL.
I need to create custom url for modal.
How should I proceed?
dashboardAppControllers.controller('abcController', ['$scope', '$window', '$log', '$http', '$timeout', '$routeParams', '$uibModal', 'Notification', '$interval', 'userDetails', '$filter', function($scope, $window, $log, $http, $timeout, $routeParams, $uibModal, Notification, $interval, userDetails, $filter) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'remarksEditModal.html',
controller: 'remarksEditModalControllers',
size: "lg",
windowClass: 'center-modal',
resolve: {
bookingInfo: function() {
return event;
}
}
});
}]);
you can create a different state of that popup and open it with onEnter property. something like this
.state("wizard", {
url: '/wizard',
params: {
somethingWhichTurnTrueOnclick: null
}
onEnter: function($state, $timeout, $uibModal) {
var openWizard = function() {
var modal = $uibModal.open({
animation: true,
templateUrl: 'remarksEditModal.html',
controller: 'remarksEditModalControllers',
size: "lg",
windowClass: 'center-modal',
resolve: {
bookingInfo: function() {
return event;
}
}
});
modal.result.then(function(response) {
// console.log('Wizard closed', response );
});
};
openWizard(); // open wizard
});
Related
I am facing problem in call to controller in child ui state router.
URL is changing but controller not call.
no console error*
Please check code:
HTML
<a style="cursor: pointer;" class="btn btn-default btn-xs" ui-sref="interactions.details({id:n.id})">Detail</a>
Router
.state('interactions', {
url: '/interactions',
data: {
pageTitle: 'Interaction',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interaction.html',
controller: 'interactionCtl'
})
.state('interactions.details', {
url:'/details/:id',
data: {
pageTitle: 'Interaction Details',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interactionDetail.html',
controller:'interactionCtlDetails'
}).run(function ($rootScope, settings, $cookies, $http, $location, AuthenticationService, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Controller
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
Annotation array should be in sync with the parameters in the function declaration.Here annotation array is not in sync with the parameters in the function declaration.
Second parameter in your annotation array is 'interactionService' but in function, thats 'rootScope'.
Try with below controller code
warApp.controller('interactionCtlDetails', ['$scope', '$rootScope', '$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
In above code you have function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) where you have interactionService which you have missed in your injection section
Simpler example of routing, maybe you can narrow down the problem by adding one controller at a time and build the rest. Fiddle or error will help.
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
templateUrl: "/form1.html",
controller:'myController1'
},
"formColumn": {
templateUrl: "/form2.html"
}
}
})
});
Definitely your controller should throw an error in console, the order of dependency parameters injected in the controller is wrong, you are missing interactionService
change it as,
warApp.controller('interactionCtlDetails', ["$scope", 'interactionService','$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
});
I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here
I am trying to pass values to a modal over parameters. For some reason this parameter is always undefined when I try to access it in my controller. The second answer of this question is what I am building upon.
Here is my setup for the modal. Please note that $scope.evaluationResult is defined and has valid content.
$scope.showEvaluationResult = function() {
var modalInstance = $modal.open({
templateUrl: 'evaluation-result/evaluation-result-dlg.html',
controller: 'EvaluationResultDialogCtrl',
windowClass: 'evaluation-result-dlg',
size: 'lg',
resolve: {
evaluationResult: function() {
return $scope.evaluationResult;
}
}
});
setupKeyHandling(modalInstance);
}
Here is my controller:
/**
* The controller for displaying evaluation results.
*/
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
$scope.trainingLog = {
text: ''
};
$scope.close = function () {
$modalInstance.close();
};
$scope.evaluationResult = evaluationResult; // Always undefined
}]);
What is the problem here?
You forgot to put it in injection array, should be:
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http', 'evaluationResult',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
I am trying to follow this example to show a bootstrap modal on a certain state. It works fine without a modal (so the state config should be ok). All needed dependencies (ie angular bootstrap) should be available.
when I do a console.debug($stateParams) before $modal.open I get the correct data, within the $modal.open-method however the stateParams from the last state are returned (the state I am coming from)
Any hints?
EDIT
the relevant state cfg:
.state('publications.view', {
parent: 'publications.productSelection',
url: '/{productSlug:[a-zA-Z0-9-]+}/{docID:[0-9]+}_{slug:[a-zA-Z0-9-]+}',
onEnter: ['restFactory', '$state', '$stateParams', '$modal',
function(restFactory, $state, $stateParams, $modal) {
console.debug($stateParams.docID);
$modal.open({
templateUrl: 'partials/publication.html',
resolve: {
publication: ['restFactory', '$stateParams',
function(restFactory, $stateParams) {
console.debug($state.params);
console.debug($stateParams);
return restFactory.view($stateParams.language, $stateParams.productSlug, $stateParams.docID);
}
]
},
controller: ['$scope', '$sce', 'publication', '$rootScope',
function($scope, $sce, publication, $rootScope) {
$rootScope.pageTitle = publication.data.data.publication.Publication.title;
$scope.publication = $sce.trustAsHtml(publication.data.data.publication.Publication.content);
}
]
});
}
]
});
You can get around this issue by injecting the current $stateParams into the onEnter function, save them as state in some service, and inject that service instead into your modal resolves.
I am adapting the code from here: Using ui-router with Bootstrap-ui modal
.provider('modalState', function($stateProvider) {
var modalState = {
stateParams: {},
};
this.$get = function() {
return modalState;
};
this.state = function(stateName, options) {
var modalInstance;
$stateProvider.state(stateName, {
url: options.url,
onEnter: function($modal, $state, $stateParams) {
modalState.stateParams = $stateParams;
modalInstance = $modal.open(options);
modalInstance.result['finally'](function() {
modalInstance = null;
if ($state.$current.name === stateName) {
$state.go('^');
}
});
},
onExit: function() {
if (modalInstance) {
modalInstance.close();
}
}
});
};
})
Then in your app config section
.config(function($stateProvider, $urlRouterProvider, modalStateProvider) {
modalStateProvider.state('parent.child', {
url: '/{id:[0-9]+}',
templateUrl: 'views/child.html',
controller: 'ChildCtrl',
resolve: {
role: function(Resource, modalState) {
return Resource.get({id: modalState.stateParams.id}).$promise.then(function(data) {
return data;
});
}
}
});
}
Instead of defining the controller for my modal instance like this:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { /*ctrl-code-here*/ };
I want to define it using Module.Controller() syntax:
angular.module('MyModule', ['ui.bootstrap'])
.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'items', function ModalInstanceCtrl($scope, $modalInstance, items) { /*ctrl-code-here*/ }])
.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', function ModalDemoCtrl($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl, //what do I put here to reference the other controller?
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
In $modal.open, how do I reference ModalInstanceCtrl correctly?
You put it in quotes, like this controller: 'ModalInstanceCtrl',
Here is an example based on the demo in angular-ui bootstrap
http://plnkr.co/edit/Xa6KqUCew9OTrtEQYjku?p=preview