Below is my code:
app.controller('lookupMasterController', [
'$scope', '$routeParams', '$location', '$modal', 'lookupService', function ($scope, $routeParams, $location, $modal, lookupService) {
$scope.openCreatePopup = function () {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'app/popups/add-lookup.html',
controller: function ($scope, $modalInstance, $location, $routeParams, lookupService) {
$scope.cancel = function () {
$modalInstance.close();
}
$scope.addLookup = function () {
$scope.lookup.lookUpConfigId = $routeParams.lookupMasterId;
lookupService.save($scope.lookup).$promise.then(
function (value) {
$location.path('/edit-lookup/' + $routeParams.lookupMasterId);
$scope.$apply();// Even this is not working.
// Tried the below as well:
//$scope.$apply(function () {
// $location.path('/edit-lookup/' + //$routeParams.lookupMasterId);
// });
$modalInstance.close();
},
function (error) { /*Do something with error*/
alert(error.message);
});
}
},
size: 'lg'
});
}
}
]);
I am opening a Popup for add new lookup and then reloading the page to see the changes. But the problem is : $location.path('url'); is not working.
You should use $state service in that case. Try
$state.go('/edit-lookup/' + $routeParams.lookupMasterId);
Don't forget to inject $state in your controller initilization. Plus in your module definition you need to pass 'ui.router' as a dependency :
E.g. angular.module('my_app', ['ui.router'])
EDIT
I think you didn't load ui-router.min in your web page. Please load it just after angular.js
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
Related
I want to send data from parent to child controller but its not firing event from parent controller its been hours i am scratching my head find the problem but i failed so decided to ask help on stackoverflow, Any idea what is wrong in below code ?
ParentCtrl.js
angular.module('angularModelerApp')
.controller('ModelerCtrl', ['$scope', '$state','$log', 'toastr', 'FileSaver', 'Blob', '$uibModal', '$rootScope', '$timeout', function($scope, $state, $log, toastr, FileSaver, Blob, $uibModal, $rootScope, $timeout) {
$scope.deleteXml = function(id, toast) {
var id = $scope.diagramObj._id;
$scope.modalInstance = $uibModal.open({
templateUrl: 'app/modeler/modelerDialog/modelerDialog.html',
controller: 'ModelerDialogCtrl'
});
$timeout(function() {
$rootScope.$broadcast('delete-diagram', {
id: id
});
});
}
});
childCtrl.js
angular.module('angularModelerApp')
.controller('ModelerDialogCtrl', function ($scope, $uibModalInstance,$log,diagramService,$rootScope) {
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.$on('delete-diagram',function(e,data){
console.log('in $on',data);
});
Why dont you pass the id when you open the modal such as:
$scope.modalInstance = $uibModal.open({
templateUrl: 'app/modeler/modelerDialog/modelerDialog.html',
controller: 'ModelerDialogCtrl',
resolve: {
item: function() {
return $scope.diagramObj._id
}
}
});
Fetch it in the child component in this way:
angular.module('angularModelerApp')
.controller('ModelerDialogCtrl', function ($scope, $uibModalInstance,$log,diagramService,$rootScope) {
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.$on('delete-diagram',function(e,data){
console.log('in $on',data);
});
$uibModalInstance.result.then(function (data) {
console.log(data);
})
}
How do I include ui.bootstrap. I use ui.bootstrap to open the bootstrap modal(open) on ng-click. After that I want to send all modal data to server, for that I use $http in my angular controller. But it gives an error. Below is my angular js code.
var app = angular.module("modalFormApp", ['ui.bootstrap']);
app.controller("modalAccountFormController", ['$scope', '$modal', '$log', '$http'
function($scope, $modal, $log, $http) {
$scope.showForm = function() {
$scope.message = "Show Form Button Clicked";
console.log($scope.message);
var modalInstance = $modal.open({
templateUrl: 'modal-form.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function() {
return $scope.userForm;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
app.controller('ModalInstanceCtrl', ['$scope', '$http', '$modalInstance', userForm, function($scope, $http, $modalInstance, userForm) {
//var ModalInstanceCtrl = function ($scope, $modalInstance,$http, userForm) {
$scope.form = {}
$scope.url = 'submit.php';
$scope.submitForm = function() {
if ($scope.form.userForm.$valid) {
$http.post($scope.url, {
"name": $scope.name,
"email":
$scope.email,
"message": $scope.message
}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}])
'ui.bootstrap' has prerequisites 'ngAnimate' and 'ngTouch'. You should add them to your module
var app = angular.module("modalFormApp", ['ngAnimate','ngTouch','ui.bootstrap']);
And you should add their scripts to your view
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.min.js")
I have been trying to redirect my application to the following link using
$location.path('/enterprise/update/' + enterprise.id);
The current url when I click the button is http://localhost:8080/#/enterprise/view
and I would like it to be changed to http://localhost:8080/#/enterprise/update/0
(The 0 here represents the id)
The edit function is the one which is called when I click on the button to redirect.
Relevant code:
EnterpriseCtrl.js
app.controller('EnterpriseCtrl', ['$scope', 'Enterprise', '$location','$http','$route','$routeParams','$resource', function($scope, Enterprise, $http, $route, $location, $rootScope) {
$scope.enterprises = Enterprise.list({}, function (response) {
return response;
});
$scope.add = function(){
Enterprise.save($scope.enterprise,function (){});
$scope.enterprise = null;
};
$scope.delete = function(enterprise, index){
alert("Do you really want to delete an Enterprise at index " + (index+1) + "?");
//book.$remove();
Enterprise.remove(enterprise);
$scope.enterprises.splice(index, 1);
};
$scope.edit = function(enterprise){
console.log(enterprise.id);
console.log(location);
console.log($location);
$location.path('/enterprise/update/' + enterprise.id);
};
// $scope.enterprise = Enterprise.get({id: $route.current.params.id});
$scope.update = function(){
Enterprise.update($route.current.params.id);
$location.path($rootScope.history.view);
};
}]);
app.js
var app = angular.module('mpsApp', ['ngRoute','ngResource']);
app.config(['$routeProvider','$locationProvider',
function ($routeProvider,$locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/enterprise/view', {
controller: 'EnterpriseCtrl',
templateUrl: 'showEnterprise.html'
}).
when('/enterprise/add', {
controller: 'EnterpriseCtrl',
templateUrl: 'addEnterprise.html'
}).
when('/enterprise/update/:id', {
controller: 'EnterpriseCtrl',
templateUrl: 'updateEnterprise.html'
}).
otherwise({
redirectTo: '/'
});
}
]);
The error that I get is
TypeError: $location.path is not a function
at Scope.$scope.edit (EnterpriseCtrl.js:29)
at $parseFunctionCall (angular.js:12330)
at callback (angular.js:22940)
at Scope.$eval (angular.js:14381)
at Scope.$apply (angular.js:14480)
at HTMLButtonElement.<anonymous> (angular.js:22945)
at HTMLButtonElement.eventHandler (angular.js:3009)
Your dependency injection array/parameters are out of order. Should be:
[ '$scope', 'Enterprise', '$location', '$http', '$route', '$routeParams', '$resource',
function($scope, Enterprise, $location, $http, $route, $routeParams, $resource) {
Note, how each single array element service corresponds to the parameters in the function.
I'm currently working on an AngularJS app and attempting to create a controller with functions to be used throughout the app. Examples of this include a back button, a logout button, and navigation links. However when trying to execute it, it won't work. How would I be able to make it work.
For reference, body starts with
Below is my controller code:
angular.module('Squeeg.controllers', [])
.controller('SqueegApp', function($scope, $state, $rootScope, $stateParams) {
$scope.back = function() {
$state.go('welcome');
};
$scope.logout = function() {
Parse.User.logOut();
$rootScope.user = null;
$rootScope.isLoggedIn = false;
$state.go('welcome', {
clear: true
});
};
})
.controller('WelcomeController', function($scope, $state, $rootScope, $stateParams) {
alert("test");
})
.controller('HomeController', function($scope, $state, $rootScope) {
$scope.home = "Home";
})
.controller('View2', function($scope, $state, $rootScope) {
$scope.message = "Test";
});
I was following a question (ui bootstrap modal's controller 'is not defined'), which I then tried modifying for nested controllers, different scoping calls, and renaming/refactoring the code (for learning).
I couldn't get it working in My Plunker, so that leaves me with a few questions:
Why is it not working?
The original question shows creating a new module, rather than appending controllers to the app module -- why? Is this recommended?
If PageController is the ancestor controller, how would it's $scope.open method reference the other controllers open definition?
Code:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('PageController', ['$scope',
function($scope) {
$scope.open = function() {
// how to call ModalController.open?
};
}
])
.controller('ModalController', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
])
.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'items',
function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]);