We Keep Coding

angular $broadcast event is not firing?

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 to access the modalInstance $scope from outside the model

I want to update some value of a $modal in AngularJS but unable to understand how I can do this. Sample code is below:
var modalInstance;
function setupCall(data) {
var templateURL = 'partials/Chat.html';
var cssClass = 'medium-Modal';
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
$scope.updateStatus=function() {
...
}
}
});
modalInstance.result.then(function() {
});
}
// first time i call this function to open model
setupCall(event);
Now when model open successfully and if I received some update from service and I again want to show updated values in a model then how I can call updateStatus() from outside the model. I try to using
modalInstance.updateStatus(..) but it is not working. Can someone tell me a proper way to do this?

You can pass a scope option to $modal, and then use AngularJS events
var modalScope = $rootScope.$new();
myService.doSomethingAsync(function (data) {
$rootScope.$emit('some event', data);
});
$modal.open({
scope: modalScope,
controller: function ($scope) {
/* ... */
$scope.$on('some event', function() {
$scope.updateStatus();
});
}
});

You can use $broadcast to call that method. For example, after you received update from your service in your view's controller (where you are calling setupCall or launching the modal), do this:
$rootScope.$broadcast("dataUpdatedFoo", {newData: "bar"));
Now, inside your controller of modal, register a listener for this:
$scope.$on("dataUpdatedFoo", function(e, data) {
$scope.updateStatus();
});

Thanks everyone. I resolve this by adding custom eventlistener.
var listeners = [];
function _addEventListener(listener) {
listeners.push(listener);
return listener;
}
function _removeListener(listener) {
for (var i=0; i < listeners.length; i++){
if (listeners[i] === listener){
listeners.splice(i, 1);
break;
}
}
}
function setupCall(data) {
......
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
var listener = _addEventListener(function (event) {
$log.info("chat msg: "+JSON.stringify(event));
});
$scope.$on('destroy', function () {
_removeListener(listener)
});
...

$scope is getting lost while opening a modal on ng-click

When I am trying to open a modal on ng-click the scipe variables is getting lost.
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl',
scope: $scope // <-- I added this
});

You should pass data using the resolve property like this:
var modalInstance = $modal.open({
templateUrl: templateSrv.templateUrl('partials/create.html'),
controller: modalBootstrap,
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
var result = {};
result.scope = $scope;
return result;
}
}
});
modalInstance.result.then(
function (dataPassedFromModalConroller) {
//this is called when the modal is closed
},
function (dataPassedFromModalConroller) { //Dismiss
//this is called when the modal is dismissed
}
);
Specify the controller for the modal instance like this (we do this in another file):
var modalBootstrap= function ($scope, $modalInstance, data) {
$scope.modalInstance = $modalInstance;
$scope.scope = data.userId;
};
modalBootstrap['$inject'] = ['$scope', '$modalInstance', 'data'];
Your modal template would look something like this:
<div ng-controller="AppCreateCtrl">modal content here</div>

Call a method from one controller defined inside directive in another controller : AngularJS

I have a directive in which controller exists, where i have a function. I need to call that function from another controller.
Directive :
angular.module('test.directives').directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
$scope.getRoles = function() {
console.log('hi');
};
}
};
});
$scope.getRoles method is the method i need to call from different controller.
Controller:
angular.module("test.controllers").controller("testController", function($scope, $http) {
$scope.getUsers = function() {
// i need to call getRoles method here
}
});
How can i do that?
Please help,
Thanks.

You can use AngularJS Service/Factory
I put the getRoles function within the factory for the API which can be injected anywhere.
Working Demo
var RolesModule = angular.module('UserRoles', []);
RolesModule.factory('RolesAPI', function() {
return {
getRoles: function() {
this.roles = 'my roles';
console.log('test');
}
}
});
angular.module("test.controllers",['UserRoles'])
.controller("testController",function($scope,$rootScope,RolesAPI, $http) {
$scope.getUsers = function() {
RolesAPI.getRoles();
}
});
angular.module('test.directives',['UserRoles'])
.directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
}
};
})

Try following
angular.module('test.directives').directive("manageAccess", function() {
return {
restrict: "E",
replace: true,
scope: {getRoles: '='},
templateUrl: "template/test.html",
controller: function($scope, $element, $http) {
$scope.getRoles = function() {
console.log('hi');
};
}
};
});
controller
angular.module("test.controllers").controller("testController", function($scope, $http) {
$scope.getUsers = function() {
// i need to call getRoles method here
$scope.getRoles()
}
});
in html
<manage-access get-roles="getRoles"></manage-access>

If the function is not dependent on the directive elements, move that to a service pass it to both directive and the testcontroller.

Access local variable of another function in AngularJS

How can I access variables within another function?
myApp.controller "RegistrationsController", ($scope, $location, $http, $modal)->
$scope.open = () ->
# move to global
modalInstance = $modal.open(
templateUrl: "/assets/angular/templates/registrations/_signup.html",
controller: "ModalController"
)
$scope.cancel = ->
modalInstance.dismiss('cancel')
$scope.saveUser = () ->
$scope.cancel()
From the code above I'm trying to dismiss the modalInstance (modal opened) via cancel function.
However, I guess I need to make modalInstance a global variable first?

declare modalInstance outside of the functions. This will scope it to the whole controller.
myApp.controller "RegistrationsController", ($scope, $location, $http, $modal)->
var modalInstance;
$scope.open = () ->
# move to global
modalInstance = $modal.open(
templateUrl: "/assets/angular/templates/registrations/_signup.html",
controller: "ModalController"
)
$scope.cancel = ->
modalInstance.dismiss('cancel')
$scope.saveUser = () ->
$scope.cancel()

If you're trying to cancel from the ModalController then you can add inject the $modalInstance dependency like ...
.controller('ModalController', function($scope, $modalInstance) {
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
If you're trying to cancel it from anywhere else then you can share you're controller among other directives using require? Like
.directive('otherDirective', function() {
return {
require: 'RegistrationController',
link: function(scope, el, attr, ctrl) {
}
}
});
Or you could use a service as mediator between other controllers, services, directive, what ever.
.service('mediator', function() {
var modalInstance;
this.modalInstance = function(instance) {
if (instance) {
modalInstance = instance;
}
return modalInstance;
};
});
and then in your directives and controllers and what not, do something like...
.controller('SomeController', function(mediator) {
this.cancel = function() {
mediator.modalInstance().dismiss('cancel');
});
});
You can amend for CoffeeScript ;)