I have a popup form where it's having lot of tabs.
Its' like this :
index.js
vm.openCreateOrEditPropertyModal = function (resolveProperty) {
var modalInstance = $uibModal.open({
templateUrl: '~/App/tenant/views/propertymanagement/createOrEditPropertyModal.cshtml',
controller: 'tenant.views.propertymanagement.createOrEditPropertyModal as vm',
resolve: {
resolveProperty: function () {
return resolveProperty;
}
}
});
};
Tabs are like this :
createOrEditPropertyModal.cshtml
<uib-tabset class="tab-container tabbable-line" type="pills">
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'~/App/tenant/views/propertymanagement/tabs/propertyForm.cshtml'"></div>
</uib-tab>
</uib-tabset>
createOrEditPropertyModal.js
(function () {
appModule.controller("tenant.views.propertymanagement.createOrEditPropertyModal", [
"$scope", "resolveProperty", "localStorageService", "$uibModalInstance", function ($scope, resolveProperty, localStorageService, $uibModalInstance) {
var vm = this;
//to close the pop up
vm.cancel = function () {
$uibModalInstance.close();
};
}
]);
})();
propertyForm.cshtml
<div ng-controller="tenant.views.propertymanagement.tabs.propertyForm as vm">
<button type="button" ng-click="vm.cancel()">#L("Close")</button>
</div>
propertyForm.js
(function () {
appModule.controller("tenant.views.propertymanagement.propertyForm", [
"$scope", "resolveProperty", "localStorageService", function ($scope, resolveProperty, localStorageService) {
var vm = this;
}
]);
})();
Above set up is working fine.Now I need to access cancel() method on the createOrEditPropertyModal.js file from the child form (i.e. propertyForm.cshtml).But it's not being fired.Can you tell me how to do that ? I have tried like this ng-click="$parent.cancel()".But it's not working.
You can do vm.cancel() directly inside a child form as you are already using controllerAs pattern. But in your case you have both controller alias as vm it is referring to current child controller context. Changing name of either of controller alias would make it working.
Best way to solve this issue would change your controller alias to different name. Controller aaliases should be like by looking at their name's you can pretend which controller it is.
--
The ng-click isn't working because cancel method isn't there inside $parent scope. You should be doing $parent.vm.cancel(). But I'd not prefer you to use $parent on view, because bad practice.
I can think of three possible solutions:
It's because the cancel function is not on the $parent scope, but on the parent controller. One way to achieve this is probably to use different naming for controllers: related SO answer
Otherwise, you could put the cancel function on the $scope variable in createOrEditPropertyModal.
Just change createOrEditPropertyModal.js:
vm.cancel = function () {
$uibModalInstance.close();
};
to
$scope.cancel = function () {
$uibModalInstance.close();
};
You can pass functions to modals similar to directives: related SO answer
Related
UPDATE PLEASE HELP:
Tried what you suggested, the problem is when i try to pass the value to another "Module". Tried creating a service but the function didn't work, maybe i missed something.
Made Example Using rootScope:
var informes = angular.module('informes', ['angular-drupal', 'ui.bootstrap']);
informes.controller('InformesCtrl', ['drupal', '$rootScope', '$scope', '$http', 'InformesFtry', function(drupal, $rootScope, $scope, $http, InformesFtry) {
$rootScope.nodeID = function(item){
var item = "hi";
console.log(item);
}
}]);
Console hi
It works in first module, but...
In my other Module with different Page...
var nodeInformes = angular.module('node-informes', ['informes']);
nodeInformes.controller('NodeInformesCtrl', ['drupal', '$rootScope', '$scope', '$http', 'InformesFtry', function(drupal, $rootScope, $scope, $http, InformesFtry) {
$scope.nodeID2 = $rootScope.nodeID(item);
console.log($scope.nodeID2);
}]);
Console: item is Undefined
I'm trying to figure out of how can i pass a function to another module, but it seems that it is impossible. I didn't try to use same module, but it works if the controller is child from the first controller.
I really apprecaite any help you can provide me to pass a function with parameter to another module with another controller. I'm trying to learn with this. Thanks!!!
EDIT: If i add the firstcontroller as a dependency it gives me Unknown Provider... Sorry for my mistake.
In Angular JS there are three ways for controllers to communicate with other controllers, and any other method is asking for trouble:
Use a service:
Use a service as an intermediary between controllers:
function MyService() {
this.MyObject = {};
}
function ctrl1(MyService) {
Myservice.MyObject = {
someData: "someValue"
};
}
function ctrl2(MyService) {
$scope.someValue = MyService.MyObject.someData;
}
Use the event system
function ctrl1($rootScope) {
$rootScope.$broadcast("my-event", {someData: "someValue"});
}
function ctrl2($scope) {
$scope.$on("my-event", function(event, params) {
$scope.someData = params.someData;
});
}
Scope inheritence
<div ng-controller="ctrl1">
<div ng-controller="ctrl2">
</div>
</div>
function ctrl1($scope) {
$scope.someData = "someValue";
}
function ctrl2($scope) {
console.log($scope.$parent.someData); //"someValue"
}
I'm trying to get modals woking with angular bootstrap. I can launch the modal just fine, but I'm having some scope issues dismissing the modal.
When I launch the modal, I can specify a controller that I can call functions from, which works, but it seems to be a copy of the controller without a $parent and without any controller-local variables.
I need access to the return value of $uibModal.open() in order to close the modal, so I'm trying to store it in var modalInstance, which works fine when I'm within the scope of the controller, but the copy of the controller passed into the $uibModal service doesn't have the local variable modalInstance set.
I can get around this by storing the return object in the $rootScope, but that seems like a bad idea. Am I wrong? What's the best way to get access to modalInstance from the click handler passed into the $uibModal service? Can I avoid using the $rootScope?
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'MainCtrl',
});
// Wouldn't need to do this if I could access modalInstance in close handler
$rootScope.modalInstance = modalInstance;
}
$scope.close = function () {
console.log('close');
console.log(modalInstance);
// Works, but should I be using $rootScope like this?
//$rootScope.modalInstance.close();
// Doesn't work, modalInstance is undefined
modalInstance.close();
}
});
Angular instantiates a new instance of a controller whenever it is used, and it is the same for modal. So when you specify controller: 'MainCtrl' you're telling angular you want to instantiate one of those for your modal, which is rarely what you want.
Instead you should create a separate controller for the dialog, which can return values on closing using the $uibModalInstance service.
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'DialogCtrl',
});
....
}
});
app.controller('DialogCtrl', function($scope, $uibModalInstance) {
$scope.theThingIWantToSave = [];
$scope.cancel = function () {
$uibModalInstance.close($scope.theThingIWantToSave);
};
});
I have this situation
two files, both in the same app
var app = angular.module('myapp');
file one is the parent and I have:
app.controller("ControllerOne", ['$scope', '$http', '$modal',
function ($scope, $http, $modal) {
$scope.$on('refreshList', function (event, data) {
console.log(data);
});
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithControllerTwo',
controller: 'ControllerTwo',
size: 'lg',
resolve: {
someParam: function () {
return "param"
}
}
});
}
}]);
file two is the child and I have:
app.controller("ControllerTwo", ['$scope', '$http', 'someParam',
function ($scope, $http, someParam) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
$scope.$emit('refreshList', [1,2,3]);
}).error(function () {
});
};
}]);
Assuming that i can open the modal and I can "SaveSomething".
What I need to do to send some data from ControllerTwo to ControllerOne?
I already checked this post Working with $scope.$emit and .$on
but I cant't solve the problem yet.
Obs:
FileOne.js -> I have the ControllerOne (parrent) -> $on
FileTwo.js -> I have the ControllerTwo (child) -> $emit
Yes, I can hit the code inside $http.post.success condition
Assuming you are using angular-ui bootstrap (which has a $model), then the $scope in the model is a childscope of $rootScope.
According to $model documentation you can supply the ControllerOne $scope by using the scope option which will make the modal's $scope a child of whatever you supply. Thus:
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithControllerTwo',
controller: 'ControllerTwo',
size: 'lg',
scope: $scope,
resolve: {
someParam: function () {
return "param"
}
}
});
Then you could emit to that using $scope.$parent.$emit(...). Strictly speaking, this creates a coupling in that it assumes that the user of the modal listens to the events.
If you don't want to inject your scope, they you could inject $rootScope and emit on that. But that would also send the event to every scope in the application.
This is assuming that you actually want to leave the modal open and send a message back to the parent controller. Otherwise, just use close() or dismiss() methods.
Context:
I'm using Angular and ui-router...
I have a parent controller "ParentCtrl" with a template "ParentTempl".
Within the ParentTempl there is a view for 2 states: add and edit.
I want call a function from the ParentCtrl "abstractUpdate" that changes its behavior based on which state is active.
Current Code:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('add', {
template: "...",
abstractUpdate = function(object){
// do add things
}
})
.state('edit', {
template: "...",
abstractUpdate = function(object){
// do edit things
}
});
}
app.controller('ParentCtrl', function ($scope, $state) {
$scope.click = function(obj){
$state.current.abstractUpdate(obj);
}
}
Question:
The current version is working, but you think it is the best solution? Any suggestions?
Usually you would use a factory or service for something like this. That way you don't clog up your routing with application logic. You could just inject $state into your factory/service so you can handle things based on the state you're in:
angular.module('myApp').factory('MyService', [
'$state',
function ($state) {
return {
myMethod: function (obj) {
if (this.hasOwnProperty($state.current.name)) {
this[$state.current.name](obj);
}
},
add: function (obj) {
// do stuff
return obj;
},
edit: function (obj) {
// do stuff
return obj;
}
}
}
]);
Now you can use your service from any controller you want, just inject it:
angular.module('myApp').controller('myController', [
'$scope',
'MyService',
function ($scope, MyService) {
$scope.obj = {};
$scope.obj = MyService.myMethod(obj);
}
]);
It would be more clear to have two separate functions that each perform their separate tasks. It's a better programming habit, imo.
You can create a controller for each of your child views and still have ParentCtrl as a parent for each. Each child controller can have its own click handler which calls either the 'edit' or 'new' method on the parent (unless it makes more sense to put that code entirely or partially on each child controller).
I have an Angular controller loaded in a view:
<div ng-controller="MyCtrl">
<p ng-bind-html="content"></p>
</div>
This partial is loaded into different views, and as a result the controller gets instantiated multiple times. In the controller, I'm detecting for location change:
angular.module('MyApp')
.controller('HintCtrl', function ($scope, $rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
alert("HI");
});
});
Each time I change my location, this fires once for each time the controller was ever loaded. How can I have this run only once?
The point is that Controllers are not singleton. You gonna have one new instance for each of the elements.
What you can do, is to use this on a service, and this one is singleton.
You could do something like this:
angular.module('MyApp')
.controller('HintCtrl', function ($scope, Alerter) {
Alerter.doSomething();
})
.service('Alerter', function($rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
alert("HI");
});
this.doSomething = function() {
...
};
});