Why do I need $rootScope.$apply when inside $rootScope.$on? - javascript

Why is $rootScope.$apply() needed in this example to update elements using ng-hide on the page?
In my experience whenever I put $scope.$apply() inside a $scope.$watch I get the "digest already in progress" error. Is this different?
app.component('myComponent', {
controller: function(){
$scope.visible = false;
$rootScope.$on('someEvent', function(){
$scope.visible = true;
$rootScope.$apply(); // why?
});
}
});

Callback registered with $rootScope.$on is triggered by either $rootScope.$broadcast or $rootScope.$emit. If you explore these methods source code you will see that these methods by itself do not trigger $digest cycle (dirty-checking). That means, that $digest should be triggered either by the code that calls $broadcast or $emit, or inside a callback registered with $rootScope.$on.
Usually, it's better to assume that callback is triggered inside $digest loop and it means that callback call should be wrapped with $apply, as in:
$rootScope.$apply($rootScope.$broadcast('event', data));
This is consistent with what angular best practices suggest:
$scope.$apply() should occur as close to the async event binding as
possible.

I can imagine that $scope.$apply is necessary if you want to support events from outside AngularJS world. Take a look and consider differences how to support events from AngularJS (ng-click) and jQuery (onClick).
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.click = function() {
$scope.$emit('inside', {
message: 'from AngularJS world'
})
}
})
.directive('eventListener', function() {
return {
restrict: 'E',
controller: function($scope) {
$scope.message = 'listening'
// in AngularJS context - $apply will throw error that $digest is already running!
$scope.$on('inside', function(event, args) {
$scope.message = args.message
})
// let to know AngularJS that something changes
$scope.$on('outside', function(event, args) {
$scope.$apply(function() {
$scope.message = args.message
}) // this is eqvivalent to:
/*
$scope.message = args.message
$scope.$apply()
*/
})
},
template: '<div>message: {{ message }}</div>'
}
})
.directive('jQueryClick', function() {
return {
restrict: 'E',
link: function(scope, element) {
$(element).on('click', function() {
scope.$emit('outside', {
message: 'outside AngularJS'
})
})
},
template: '<div><button click="click()">jQuery - onClick()!</button></div>',
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<button ng-click="click()">AngularJS ng-click!</button>
</div>
<div>
<j-query-click></j-query-click>
</div>
<div>
<event-listener></event-listener>
</div>
</div>
As this will be hard to decide what is the source of change and how it should be applied to the $scope we can move $apply from $on to $emit part.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.click = function() {
$scope.$emit('message', {
message: 'from AngularJS world'
})
}
})
.directive('eventListener', function() {
return {
restrict: 'E',
controller: function($scope) {
$scope.message = 'listening'
/*
* We are goint to support internal and external message in the same way,
* we can simplify support for it
*
$scope.$on('inside', function(event, args) {
$scope.message = args.message
})
$scope.$on('outside', function(event, args) {
$scope.message = args.message
})
*/
$scope.$on('message', function(event, args) {
$scope.message = args.message
})
},
template: '<div>message: {{ message }}</div>'
}
})
.directive('jQueryClick', function() {
return {
restrict: 'E',
link: function(scope, element) {
$(element).on('click', function() {
scope.$apply(scope.$emit('message', {
message: 'outside AngularJS'
}))
})
},
template: '<div><button click="click()">jQuery - onClick()!</button></div>',
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<button ng-click="click()">AngularJS ng-click!</button>
</div>
<div>
<j-query-click></j-query-click>
</div>
<div>
<event-listener></event-listener>
</div>
</div>

Related

How to communicate events between sibling component directives

angular JS $watch and communication between two directives
I Have a code in AngularJs where I'd like to call function in one directive when state of variable changes in other directive. I have a controller:
app.controller('TaskerCtrl', ['$scope', function($scope) {
$scope.tasksReload = false;
}
]);
Here as we can see is variable tasksReload. I'd like to call function in one of my directive when state of that variable changes on true in other directive.
Below I show code of my directives:
app.directive('newTaskWidget', function (TaskerForm, Consultants) {
return {
restrict: 'E',
scope: {
sortReverse: '=sortReverse',
tasksReload: '=tasksReload'
},
scope.test = function(){
scope.tasksReload = true;
}
app.directive('taskListWidget', function ($filter, $uibModal, Notification, TaskerForm, Consultants) {
return {
restrict: 'E',
scope: {
sortReverse: '=sortReverse',
departments: '=departmtens',
myDepartment: '=myDepartment',
tasksReload: '=tasksReload'
},
link: function (scope) {
scope.$watch('tasksReload', function (data) {
console.log("Musze przeladowac taski");
});
Below I show HTML code with my directives:
<new-task-widget sort-reverse="false" tasks-reload = 'tasksReload'>
</new-task-widget>
<task_list_widget sort-reverse="false" departmtens = "departments"
my-department="session.user.department" tasks-reload = 'tasksReload'>
</task_list_widget>
As we can see in newTaskWidget there is a function test. I'd like to call $watch action in taskListWidget when value scope.tasksReload = true; is been changed but it dosen't work correctly. I call that function with ng-click directive on button:
<button class="btn btn-primary validateButton" ng-click="test()">
</button>
There is no reaction. How could I do that properly? I would be grateful for help. Best regards ;)
One approach to communicating click events between sibling components is to use scope.$root.$broadcast:
scope.$root.$broadcast("test-event",args);
And in the sibling component, use scope.$on:
scope.$on("test-event", function(event,args) {
//Handle event here
});
The DEMO
angular.module("app",[])
.directive('newTaskWidget', function () {
return {
restrict: 'E',
scope: { },
template: `
<fieldset>
<button ng-click="test()">Click me</button>
</fieldset>
`,
link: function(scope,elem,attrs) {
scope.test = function(){
scope.$root.$broadcast("test-event");
};
}
};
})
.directive('taskListWidget', function () {
return {
restrict: 'E',
scope: {},
template: `<fieldset>clicks={{count}}</fieldset>`,
link: function (scope) {
scope.count=0;
scope.$on('test-event', function (event) {
scope.count++;
console.log("Musze przeladowac taski");
});
}
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<new-task-widget>
</new-task-widget>
<task_list_widget>
</task_list_widget>
</body>

Pass parent directive's controller to a directive controller (like it is done in the "link" function)

I have several hierarchical directives and in one, I need to have some functions in its controller, so that the child elements can interact with it. But this one directive also needs to reference its parent directive's controller, but I don't know how to do that in controller (I know how in the "link()" but this time I need controller for the child interaction). It should be possible to do it with scope:
controller: function($scope){},
link: function (scope, ..., parentCtrl){
scope.parentCtrl = parentCtrl;
}
but it seems weird, because the link function is executed after the controller is, or it it OK? I'm confused and I think it might be a bad design?
diagram:
ParentParentDirective
controller: function(service){
this.service = service;
}
ParentDirective
controller: function(){
this.callOnService = function(id){
???ParentParentDirective???.service.callSth(id);
}
}
ChildDirective
link(scope, ...,ParentDirectiveCtrl){
scope.makeChanges = ParentDirectiveCtrl.callOnService;
}
You can use $element.controller method for that, as in example below.
angular.module('app', []);
angular.module('app').directive('grandparent', function () {
return {
restrict: 'E',
controller: function () {
this.go = function () {
console.log('Grandparent directive');
};
}
};
});
angular.module('app').directive('parent', function () {
return {
restrict: 'E',
controller: function () {
this.go = function () {
console.log('Parent directive');
};
}
};
});
angular.module('app').directive('child', function () {
return {
restrict: 'E',
require: ['^parent', '^grandparent'],
controller: function ($element) {
var parentCtrl = $element.controller('parent');
var grandparentCtrl = $element.controller('grandparent');
parentCtrl.go();
grandparentCtrl.go();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app">
<grandparent>
<parent>
<child></child>
</parent>
</grandparent>
</div>

Proper "Angular" way to pass behavior to directive?

When looking for information regarding Angular directives and passing behavior to directives, I get ended up being pointed in the direction of method binding on an isolate scope, i.e.
scope: {
something: '&'
}
The documentation for this functionality is a bit confusing, and I don't think it'll end up doing what I want.
I ended up coming up with this snippet (simplified for brevity), that works by passing a scope function in HomeCtrl, and the directive does it's work and calls the function. (Just incase it matters, the real code passes back a promise from the directive).
angular.module('app', []);
angular.module('app')
.directive('passingFunction',
function() {
var changeFn,
bump = function() {
console.log('bump() called');
internalValue++;
(changeFn || Function.prototype)(internalValue);
},
internalValue = 42;
return {
template: '<button ng-click="bump()">Click me!</button>',
scope: {
onChange: '<'
},
link: function(scope, element, attrs) {
if (angular.isFunction(scope.onChange)) {
changeFn = scope.onChange;
}
scope.bump = bump;
}
};
})
.controller('HomeCtrl',
function($scope) {
$scope.receive = function(value) {
console.log('receive() called');
$scope.receivedData = value;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.min.js"></script>
<div ng-app="app" ng-controller="HomeCtrl">
<passing-function on-change="receive"></passing-function>
<p>Data from directive: {{receivedData}}</p>
</div>
Is this a proper "Angular" way of achieving this? This seems to work.
What you need is to pass the function to the directive. I'll make a very small example.
On controller:
$scope.thisFn = thisFn(data) { console.log(data); };
In html:
<my-directive passed-fn="thisFn()"></my-directive>
On directive:
.directive('myDirective', [
() => {
return {
restrict: 'E',
scope: {
passFn: '&'
},
template: '<div id="myDiv" ng-click="passFn(data)"></div>',
link: (scope) => {
scope.data = "test";
}
}
}]);

Calling a Directive from another Directive

Please consider this tryout on Plunkr.
I have a simple set up:
<body ng-app="myApp">
<div ng-controller="myController">
<parent-directive></parent-directive>
<child-directive></child-directive>
</div>
</body>
With the parent directive defined like:
app.directive("parentDirective", [
"$compile",
function (
$compile) {
return {
scope: {
person: "="
},
restrict: "E",
template: "<h3>I'm a parent</h3>",
controller: [
"$scope",
function ($scope) {
// --- PRIVATE --- //
var self = {};
$scope.ClickMe = function() {
alert('Parent clicked');
};
}],
link: function ($scope, $elem, $attrs) {
}
};
}]);
And child directive defined like:
app.directive("childDirective", [
"$compile",
function (
$compile) {
return {
scope: {
person: "="
},
restrict: "E",
require: "^?parentDirective",
template: "<h3>I'm a child, click <button ng-click='ClickMe()'>here</button></h3>",
controller: [
"$scope",
function ($scope) {
// --- PRIVATE --- //
var self = {};
$scope.ClickMe = function() {
alert('child clicked');
$scope.parentDirective.ClickMe();
};
}],
link: function ($scope, $elem, $attrs) {
}
};
}]);
The child click is handled, but the click defined on the `parent', returns undefined:
TypeError: Cannot read property 'ClickMe' of undefined
looking at the console.
Any idea what's going wrong?
Any idea what's going wrong?
You cannot require a sibling directive.
The required directives controller methods dont get exposed automagically onto your scope.
You should expose methods on the controller itself, not on the assigned $scope.
You can require a directive that is defined on the same element as the requiring directive, or on a parent element.
<child-directive parent-directive></child-directive>
<parent-directive>
<child-directive></child-directive>
</parent-directive>
When you require the controller (aka. exposed API) of another directive, it doesn't magically end up on the $scope of the requiring directive.
It does however end up in your link function as the fourth argument.
Like so:
.directive('child', function () {
return {
require: '?^parentDirective',
link: function (scope, el, attrs, parentDirectiveController) {
scope.clickMe = function () {
parentDirectiveController.clickMe();
};
}
};
});
Expose the methods you want available in other directives onto this instead of $scope, as the $scope way of doing it won't work the way you intend it to when you have isolated scopes.
.directive('parent',
controller: function () {
this.clickMe = function () {};
}
}
To get your example working;
<parent>
<child></child>
</parent>
.directive('parent', function () {
return {
controller: function () {
this.clickMe = function () {};
}
};
}
.directive('child', function () {
return {
require: '^?parent',
link: function (scope, el, attrs, parentCtrl) {
scope.clickMe = function () {
parentCtrl.clickMe();
};
} 
};
});
Simplified (& working) version of your plunker: http://plnkr.co/edit/nao4EvbptQm7gDKkmZS2?p=preview
Put your child directive in your parent directive template. Then use $scope.$parent.ClickMe(). Here's what it would look like.
Simple setup:
<body ng-app="myApp">
<div ng-controller="myController">
<parent-directive></parent-directive>
</div>
</body>
Parent directive:
app.directive("parentDirective", [
function () {
return {
scope: {},
restrict: "E",
template: "<h3>I'm a parent</h3><child-directive></child-directive>",
controller: [
"$scope",
function ($scope) {
$scope.ClickMe = function() {
alert('Parent clicked');
};
}
]
};
}
]);
Child directive:
app.directive("childDirective", [
function () {
return {
restrict: "E",
template: "<h3>I'm a child, click <button ng-click='ClickMe()'>here</button></h3>",
controller: [
"$scope",
function ($scope) {
$scope.ClickMe = function() {
alert('child clicked');
$scope.$parent.ClickMe();
};
}
]
};
}
]);
I might be thinking about your problem a little differently but I would take a look at $broadcast. The idea is you can broadcast an event and have "n" number of directives in your case listening for that event.
http://plnkr.co/edit/wBmX2TvC3yMXwItfxkgl
brodcast:
$scope.ClickMe = function() {
alert('child clicked');
$rootScope.$broadcast('child-click');;
};
listen:
$scope.$on('child-click', function (event, args) {
alert('Parent clicked');
});

$scope.$apply() not calling function

I have a need for a custom click directive, which executes the passed code using scope.$apply().
$(elem).on('click', function(){
scope.$apply(attrs.wdClick);
});
This works fine if I pass something like wd-click="something = !something". But when I try to call a $rootScope function it does not work, however it does work when using the default ng-click.
wd-click="$root.someFunction()" //this does not call the function but ng-click does
I have tried updating the directive to make it work
$(elem).on('click', function(){
$rootScope.$apply(attrs.wdClick);
});
But this does not work either. Any ideas?
attrs.wdClick is a string, so passing it to $apply won't do anything. To call the function you can pass the string to $eval
scope.$apply(function() {
scope.$eval(attrs.wdClick)
});
You should wrap your code in function(){}
scope.$apply(function(){
attrs.wdClick() // this is some sunction I suppose
});
Would you want to call your rootscope method in an another controller? If I understand correctly, try to use this way :
angular.module('app', [])
.controller('Ctrl', function Ctrl1($scope, $rootScope) {
$rootScope.blah = 'Hello';
$scope.yah = 'World'
})
.directive('myTemplate', function() {
return {
restrict: 'E',
templateUrl: 'my-template.html',
scope: {},
controller: ["$scope", "$rootScope", function($scope, $rootScope) {
console.log($rootScope.blah);
console.log($scope.yah);
$scope.test = function(arg) {
console.log(arg);
}
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<my-template></my-template>
</div>
<!-- my-template.html -->
<script type="text/ng-template" id="my-template.html">
<label ng-click="test($root.blah)">Click</label>
</script>
</div>
Also you can try on jsfiddle,
http://jsfiddle.net/mg74b/24/
Is there a reason you are trying to use attrs instead of a scope property? Also, you should use $timeout instead of $apply.
angular
.module('app', [])
.directive('myDirective', myDirective);
myDirective.$inject = ['$timeout'];
function myDirective($timeout) {
return {
restrict: 'E',
templateUrl: 'my-template.html',
scope: {
wdClick: '='
},
link: linkFn
};
function linkFn(scope, element) {
element.on('click', function () {
$timeout(scope.wdClick);
});
}
}

Categories