I am new to angularJS and not sure what i'm doing wrong.
I am trying to implement an edit modal window so I am making a copy of the element to edit, then trying to access it once an image upload i done to update the image src, but for some reason the scope variable is empty in the upload function.
What am i doing wrong ?
app.controller('projectsController', function($scope, $rootScope, $http, $modal) {
$scope.edit = function(index){
$scope.tempObj = angular.copy($scope.projects[index]);
var modalInstance = $modal.open({
templateUrl: 'projects/_edit_project',
controller: ModalInstanceCtrl,
resolve: {
obj: function () { return $scope.tempObj; }
}
}).result.then(function (project) { $scope.projects[index] = project });
}
$scope.processFileUpload = function(){
console.log($scope.tempObj) <--THIS RETURNS UNDEFINED
}
var ModalInstanceCtrl = function ($scope, $modalInstance, obj) {
$scope.obj = obj;
$scope.ok = function () {
$modalInstance.close($scope.obj);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
}
Related
A very common question. help is really appreciated !!
i am not able to pass loginCtrl as a argument in SignupCtrl
Also if there is any proper way to do this please suggest
here is the code
$scope.loginCtrl = function ($scope, $modalInstance) {
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
$scope.signupCtrl = function ($scope, $modalInstance,loginCtrl){
$scope.close1=loginCtrl.cancelLogin;
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
Bind click event.
user.showModalDialog = function (item) {
var obj = {
selectedItem: item
};
_showModalDialog(obj);
};
_showModalDialog Method
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
},
controller: function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user=user;
}
Another way of doing this,
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
controller: _userCtrl,
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
}});
its controller in the same file, its the inline controller, you can also make it in external file.
var _userCtrl = ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user = user;
}];
Second approach is, you can pass data between two controllers by use of service.
I have a $scope.selected ( a modal that return a value selected ) to be created in ModalInstanceCtrl controller and used in displayValue controller,How Can I spent the first controller value at the second,
app
.controller('DemoCtrl', function ($scope, $modal) {
console.log("in angular");
$scope.selected = null;
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg'
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
});
};
})
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.setSelectedSegment = function (value) {
$scope.selected = value;
$modalInstance.close($scope.selected);
};
})
.controller('displaySelected', function ($scope) {
// get selected from ModalInstanceCtrl controller
$scope.displayValue= $scope.selected;
};
})
You need to create angularjs service for this purpose and then include the service where you need to access its value.
var app = angular.module("MyApp", []);
app.factory("UserService", function() {
var users = ["Peter", "Daniel", "Nina"];
return {
all: function() {
return users;
},
first: function() {
return users[0];
}
};
});
app.controller("MyCtrl", function($scope, UserService) {
$scope.users = UserService.all();
});
app.controller("AnotherCtrl", function($scope, UserService) {
$scope.firstUser = UserService.first();
});
I'm trying to pass a value to the Popup Controller, but is only passing if i insert this "havePermissions" in the controller but gives this error https://docs.angularjs.org/error/$injector/unpr?p0=havePermissionsProvider (Unknown provider: havePermissionsProvider)
if i remove this "havePermissions, i dont have the error, but dont pass the value to the modal controller (is undefined the value)
Modal Open
$scope.open = function (size) {
var modalScope = $rootScope.$new();
modalScope.modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalScope.modalInstance.result.then(function () {
});
};
Modal Controller
angular.module("participants.controller", ['ui.bootstrap'])
.controller("ModalInstanceCtrlPartic", ["$scope", "$http", "$location",
"$routeParams", "UserService","havePermissions","logger",
function ($scope, $http, $location, $routeParams, UserService,
havePermissions,logger) {
var page = $location.path().split('/')[1];
$scope.havePermissions = havePermissions;
$scope.ID_Event = page == "events" ? $routeParams.eventId : null;
$scope.ID_UserGroup = page == "groups" ? $routeParams.groupId : null;
$scope.page = page;
$scope.model = {};
UserService.GetParticipants($routeParams.groupId, $routeParams.eventId).then(function (response) {
$scope.model = response.data;
}, function (e) {
logger.logError("Ocorreu um erro, tente novamente.!");
});
$scope.emailList = [];
$scope.ok = function (list) {
//envia email
$scope.modalInstance.close('');
};
$scope.cancel = function () {
$scope.modalInstance.close('');
};
}]);
$modal.open method should not go inside the newly created scope.
Keep var modalInstance = $modal.open({//init code})
Modal code will be changed as follows.
$scope.open = function (size) {
var modalScope = $rootScope.$new();
var modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope ,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalInstance.result.then(function () {
});
};
Here is updated plunkr not exactly the same.
Hope this is helpful to you.
I'd like to have my Angular Ui Modal controller/object declared outside
it's triggering controller (& in another file), without polutting the
global namespace.
Is this possible? Is it possible to declare the modal controller
like a regular controller and somehow pass parameters in (from my
trigger controller)?
I currently have: (which ain't cool)
(function () {
TriggeringCtrl.$inject = ['$scope', 'htmlClient', 'apiCall', '$timeout', '$modal', 'utility'];
function TriggeringCtrl($scope, htmlClient, apiCall, $timeout, $modal, utility) {
};
app.controller('TriggeringCtrl', TriggeringCtrl);
var ModalCtrl = function ($scope, $modalInstance, node, apiCall, utility) {
}
});
You have example here which is not global:
http://plnkr.co/edit/fCfvcnwP9JSHbX5L2Vuu?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal, $q, $timeout) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close('item');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
var p = $q.defer(); /// simulate data
$timeout(function(){
p.resolve(['item1', 'item2', 'item3']);
});
return p.promise.then(function(data){
return data;
});
}
}
});
};
});
I have the following AngularJS below which opens up a dialog and I type into 2 input fields and press ok() which will write the values of the inputs to my $scope.
This works but when I open the modal again and enter more details into the input fields and click ok() I am trying to add this to the current input object in my $scope but instead it is just over-writing it.
var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);
app.controller('MenuSideController', ['$scope','$modal','$log', function($scope, $modal, $log) {
var ModalInstanceCtrl;
$scope.createmarker = function () {
var modalInstance = $modal.open({
templateUrl: 'template/modal-add-marker.html',
controller: ModalInstanceCtrl,
resolve: {},
scope: $scope.$new()
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.input = [];
$scope.ok = function () {
$modalInstance.close($scope.input);
console.log($scope);
$scope.gps = "";
$scope.title = "";
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.plotmarkers = function($scope) {
console.log($scope);
};
}]);
Check out my code in Plunker
I would add/change to modalInstance:
modalInstance.result.then(function (selectedItem) {
$scope.keys.push({title: selectedItem.titley, gps:selectedItem.gps, desc:selectedItem.desc});
}
Demo Plunker
You are just using the reference address to the value, if you use angular.copy(your-object) it will create a new instance that will not be overridden when you reopen the modal.
I'm not sure I understand your question, but I think what you're trying to do is have the modal push selections into an array in the parent controller? If so, you simply need to change your modalInstance.result.then function to something like this
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.selected = {};
$scope.selected.items = [];
$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.items.push(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
For a full working example, see here: http://plnkr.co/edit/IA8qTX29DDIS1jXqx3gw?p=preview