I create a custom directive sites in app.js file.
app.directive('sites',function ($rootScope) {
var siteController =['services','$scope','$rootScope' , function(services,$scope,$rootScope){
// From this function i return promise
$scope.getAllSiteService = function() {
return services.getSiteList($scope.panel.panelConfig.moduleAlias,$scope.searchText,$scope.startSitePosition);
}
$scope.$on('loadsiteonedit',function(args){
return services.getSiteList(args.alias,args.searchText,args.startPosition);
});
}];
return{
restrict : 'E',
controller: siteController,
template : '/site/site.html'
}
});
My Controller is
app.controller('dataVisualisationPanelCtrl', [ '$scope', '$http', '$modalInstance', '$modal', '$log', '$rootScope', 'panel', 'services', 'callfrom', '$q','loadJS',
function($scope, $http, $modalInstance, $modal, $log, $rootScope, panel, services, callfrom, $q,loadJS) {
$scope.onload = function() {
var scopeData ={
"alias" : $scope.panel.panelConfig.module,
"searchText" : '',
"startPosition" : $scope.startSitePosition
}
// Both are used respectively.
$scope.$emit('loadsiteonedit',scopeData );
$scope.$broadcast('loadsiteonedit', scopeData );
}}]);
From custom directive i need to return promise to controller. how can i achieve this.
Note : We are using angular 1.2
Related
i have media List , when i click at an item i want to open ngDialog and pass model to ngDialog , i have read documentation and blog but all of them use $scope to pass model or data , not controller as (vm) . how can i use vm to pass data to ngDialog controller and how can i call parent vm($parent.$scope) from ngDiloag controller in vm(Controller as) case
here is my code (simplified version )
(function () {
'use strict';
angular
.module('app.media')
.controller('mediaController', Controller);
Controller.$inject = ['$filter', 'ngTableParams', '$rootScope', '$http', '$log', '$uibModal', 'ngDialog', 'toaster', 'mediaDataService'];
function Controller($filter, ngTableParams, $rootScope, $http, $log, $uibModal, ngDialog, toaster, mediaDataService) {
var vm = this;
vm.media = {};
activate();
function activate() {
vm.updateMedia = function () {
mediaDataService.updateMedia(vm.media).then(function (res) {
toaster.pop('success', 'ویرایش فایل با موفقیت انجام شد', 'ویرایش فایل')
})
}
vm.openUpdateDialog = function (media) {
//i want to use vm.media in opening dialog
vm.media = media;
ngDialog.open({
template: 'media/edit'
, className: 'ngdialog-theme-default'
, controller: 'updateMediaController',
//i had used data to pass data to new controller and used ngDialogData in my opening template to access media ,
//the probelm with this case is i cant access parrent controller(the controller that is openin dialog) from DngDialog
//opened Controller(because i want to run parrent controller updateMedia function when user click update in opened dialog)
//**commented out - not usefull **//
//data:media
})
}
}
}
})();
any suggestion ?
thank you
try this:
If you use a controller with separate $scope service this object will be passed to the $scope.$parent param:
see this for more information
ngDialog.open({
template: 'media/edit',
className: 'ngdialog-theme-default',
controller: 'updateMediaController',
scope:$scope
})
Here is my directive:
app.directive('gwQuestionSet', function (QuestionSetFactory, _) {
'use strict';
return {
restrict: 'A',
templateUrl: '/Classification/templates/question-set.html',
scope: {
'gwPlQuestionSet': '='
},
controller: ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http, _) {
var set = $rootScope.QuestionSets;
var getquestionSets = QuestionSetFactory.create();
var questionSets = getquestionSets.getQuestionSetViewModel(set);
$scope.questionSets = questionSets;
}]
};
});
My question is if I reset the data of $rootScope.QuestionSets from my main controller, can these code in directive controller be revoked and the template get refreshed?
how can i call angular ui bootstrap modal popup from inside another controller , as the condition is like instead of calling from view i need to call it from inside a function
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval) {
$scope.check = function(){
console.log("call parent ==========>")
// call open method in modal popup here
}
App.controller('orderCancellationController', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function (mail) {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: ModalInstanceCtrl,
resolve: {
mail: function () {
return mail;
}
}
});
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, mail) {
$scope.mail = mail;
$scope.submit = function () {
$scope.$parent.check();
$modalInstance.close('closed');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
ModalInstanceCtrl.$inject = ["$scope", "$modalInstance", 'mail'];
}]);
}]);
so i want to call the open method in orderCancellationController from inside the check method , help !!
Following the example from my comment: Angular Calling Modal Open function from one controller to another
In order to open the modal from another controller you have to create a service, I did so in my app.js file, like so:
myApp.service('modalProvider',['$modal', function ($modal) {
this.openPopupModal = function () {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
Then in the controller I wish to open my modal from, I inject the 'modalProvider' service, like so:
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval','modalProvider', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval, modalProvider) {
// function to open modal
$scope.check = function(){
modalProvider.openPopupModal();
}
i am trying to inject $http into directive controller like the following :
JS
app.direcitve('customDirecitve',function(){
return : 'E',
scope : {
url : "#",
urlParams : "#"
} ,
controller : ['$scope', '$http', function($scope, $element, $attrs, $transclude,$http) {
$http.post($scope.url,$scope.urlParams).success(function (data) {
});
]};
});
what is wrong with this injection ?
You have to respect the same order for your injections :
controller : ['$scope','$element', '$attrs', '$transclude', '$http', function($scope, $element, $attrs, $transclude, $http) {
$http.post($scope.url,$scope.urlParams).success(function (data) {
});
I have a controller that updates my awards scope:
Controller 1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
})
}
}])
Controller 2
I have another controller 2 with a click event thats outside of this controllers scope. Is it possible for the controller below to call the $scope.updateAwardScope function from controller 1?
.controller('MainController', function ($rootScope, $scope) {
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});
I've found the use of the factory/service pattern to be a very effective way of reusing code in angular applications. For this particular case you could create an AwardFactory, inject it in your controllers and then call the update function. i.e
AwardFactory
myApp.factory('AwardFactory', ['TokenRestangular', function(TokenRestangular.all) {
var factory = {
awards: []
};
factory.update = function() {
resource = TokenRestangular.all('award');
resource.getList().then(function (awards) {
factory.awards = awards;
});
return factory.awards; // You can skip the return if you'd like that
};
return factory;
}]);
YourController
.controller('MainController', function ($rootScope, $scope, AwardFactory) {
$scope.updateAwardScopeClick = function () {
AwardFactory.update();
}
});
Hope it helps!
You can use angular broadcast and receive
Controller1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
$rootScope.broadcast("update.awards");
})
}
}])
Controller 2
.controller('MainController', function ($rootScope, $scope) {
$rootScope.$on('update.awards', function(){
$scope.updateAwardScopeClick();
});
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});