Develop Reference

how to pass data from service to directive in angular.js

I have an alert service which shows alerts on top of the page. I have written a service and a directive which feeds off of the data coming from the service.
However, when i add a service using teh alert service and pass it to the directive, it does not show up, the alert
here is my code
The template
<div class="alert alert-{{alert.type}}">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="close()">×</button>
<div ng-bind="::alert.message" ></div>
</div>
Alert Service and directive
angular.module('test')
.service('alertService', function() {
var alerts = [];
this.add = function(type, msg) {
var self = this;
var alert = {
type: type,
msg: msg,
close: function() {
return self.closeAlert(alert);
}
};
return alerts.push(alert);
};
this.closeAlert = function(alert) {
return this.closeAlertIdx(alerts.indexOf(alert));
};
this.closeAlertIdx = function(index) {
return alerts.splice(index, 1);
};
this.clear = function() {
alerts = [];
};
this.getAlerts = function() {
return alerts;
};
})
.directive('alertList', ['alertService', function(alertService) {
return {
restrict: 'EA',
templateUrl: 'templates/alert/alert.html',
replace: true,
link: function(scope) {
scope.alerts = alertService.getAlerts();
}
};
}]);
In the index.html , i have referenced the alert-list directive
<div>
<alert-list ng-repeat="alert in alerts">
</alert-list>
</div>
In my controller i have,
alertService.add('info', 'This is a message');
I see that the alertService adds the alert to the array, but when i put a breakpoint in the link function of the directive, it never gets called

services are function that return an object, so you had to modify your service to be more or less like this:
.service('alertService', function() {
var alerts = [];
return{
add : function(type, msg) {
var self = this;
var alert = {
type: type,
msg: msg,
close: function() {
return self.closeAlert(alert);
}
};
return alerts.push(alert);
},
closeAlert: function(alert) {
return this.closeAlertIdx(alerts.indexOf(alert));
},
closeAlertIdx : function(index) {
return alerts.splice(index, 1);
},
clear: function() {
alerts = [];
},
getAlerts: function() {
return alerts;
}
})

The link function is only called once, when the directive element is created. When your app starts up, the link function will be called, and the scope.alerts will be set to an empty list.
I think you need to move the ng-repeat to the outer div of the alert template, rather than on the alert-list element.
Since the link function is only called once, and the identity of the array can change if you call alertService.clear, you'll probably have better luck putting a watch in your alert's link statement:
link: function(scope) {
scope.$watchCollection(alertService.getAlerts, function(alerts) {
scope.alerts = alerts;
});
}
Since this method doesn't directly do any DOM manipulation, modern angular best-practice would probably be to implement this as a component instead.

Angular 2 way binding in video play event doesn't work

My 2 way bidning doesn't work, it works if i call the vm.Play() function directly but when it gets called from the video play event then it doesn't work. Does anyone know why?
function VideoEventStats() {
var directive = {
restrict: "A",
replace: false,
scope: {
videoEventStats: "="
},
controller: controllerFunction,
controllerAs: "vm",
bindToController: true
};
controllerFunction.$inject = ["$element"];
function controllerFunction($element) {
var vm = this;
vm.Play = Play;
if($element.context.tagName === "VIDEO") {
angular.element($element).on('play', vm.Play);
$element.context.onended = function() {
console.log('ended..');
};
}
else {
console.warn('This element is not a video element');
}
function Play() {
vm.videoEventStats.CurrentUserHasSeen = true;
}
}
return directive;
}

Add the vm.videoEventStats.CurrentUserHasSeen = true; inside of a $timeout made the trick...
function Play() { $timeout(function() { vm.videoEventStats.CurrentUserHasSeen = true; }, 0); }

Unitest with directives in AngularJs. How can get the value after change by controller in directive?

I have a template file, a directives and a unitest file.
In template,
<span class="icon-fire"
ng-click="abcClick()" ng-show="valueChanged"></span>
In directive,
function abcDirective() {
return {
restrict: "AE",
replace: "true",
templateUrl: "abc.template.html",
scope: { valueChanged: "=" },
controller: abcController
};
}
In controller,we have a function for change value at expand.
var abcController = [
"$scope", "$rootScope", "$timeout", function ($scope, $rootScope, $timeout) {
$scope.abcClick = function () {
if ($scope.valueChanged) {
$scope.valueChanged= false;
washClothes();
} else {
$scope.valueChanged= true;
CleanHouse();
}
};
In unitest, I want to click abcClick() and it'll be change expand value by controller. But the result it's not my expect.
it("should call abcClick function and set expand is true", function () {
var $scope = $rootScope.$new();
$scope.valueChanged= true;
var htmlDirectiveWithArgument = '<change-value-button valueChanged="{{valueChanged}}">" + "</change-value-button>';
var element = $compile(htmlDirectiveWithArgument)($scope);
$scope.$digest();
var queryResult = element[0].querySelector(".icon-fire");
var wrappedQueryResult = angular.element(queryResult);
wrappedQueryResult.triggerHandler("click");
var isolatedScope = element.isolateScope();
var abcResult = isolatedScope.valueChanged;
expect(false).toEqual(abcResult);
});
abcResult is true. But I expect it'll become false. Because after we call click, It must be change valueChanged to false. because we input $scope.valueChanged= true; before we call click function.

AngularJS Masonry for Dynamically changing heights

I have divs that expand and contract when clicked on. The Masonry library has worked great for initializing the page. The problem I am experiencing is that with the absolute positioning in place from Masonry and the directive below, when divs expand they overlap with the divs below. I need to have the divs below the expanding div move down to deal with the expansion.
My sources are:
http://masonry.desandro.com/
and
https://github.com/passy/angular-masonry/blob/master/src/angular-masonry.js
/*!
* angular-masonry <%= pkg.version %>
* Pascal Hartig, weluse GmbH, http://weluse.de/
* License: MIT
*/
(function () {
'use strict';
angular.module('wu.masonry', [])
.controller('MasonryCtrl', function controller($scope, $element, $timeout) {
var bricks = {};
var schedule = [];
var destroyed = false;
var self = this;
var timeout = null;
this.preserveOrder = false;
this.loadImages = true;
this.scheduleMasonryOnce = function scheduleMasonryOnce() {
var args = arguments;
var found = schedule.filter(function filterFn(item) {
return item[0] === args[0];
}).length > 0;
if (!found) {
this.scheduleMasonry.apply(null, arguments);
}
};
// Make sure it's only executed once within a reasonable time-frame in
// case multiple elements are removed or added at once.
this.scheduleMasonry = function scheduleMasonry() {
if (timeout) {
$timeout.cancel(timeout);
}
schedule.push([].slice.call(arguments));
timeout = $timeout(function runMasonry() {
if (destroyed) {
return;
}
schedule.forEach(function scheduleForEach(args) {
$element.masonry.apply($element, args);
});
schedule = [];
}, 30);
};
function defaultLoaded($element) {
$element.addClass('loaded');
}
this.appendBrick = function appendBrick(element, id) {
if (destroyed) {
return;
}
function _append() {
if (Object.keys(bricks).length === 0) {
$element.masonry('resize');
}
if (bricks[id] === undefined) {
// Keep track of added elements.
bricks[id] = true;
defaultLoaded(element);
$element.masonry('appended', element, true);
}
}
function _layout() {
// I wanted to make this dynamic but ran into huuuge memory leaks
// that I couldn't fix. If you know how to dynamically add a
// callback so one could say <masonry loaded="callback($element)">
// please submit a pull request!
self.scheduleMasonryOnce('layout');
}
if (!self.loadImages){
_append();
_layout();
} else if (self.preserveOrder) {
_append();
element.imagesLoaded(_layout);
} else {
element.imagesLoaded(function imagesLoaded() {
_append();
_layout();
});
}
};
this.removeBrick = function removeBrick(id, element) {
if (destroyed) {
return;
}
delete bricks[id];
$element.masonry('remove', element);
this.scheduleMasonryOnce('layout');
};
this.destroy = function destroy() {
destroyed = true;
if ($element.data('masonry')) {
// Gently uninitialize if still present
$element.masonry('destroy');
}
$scope.$emit('masonry.destroyed');
bricks = [];
};
this.reload = function reload() {
$element.masonry();
$scope.$emit('masonry.reloaded');
};
}).directive('masonry', function masonryDirective() {
return {
restrict: 'AE',
controller: 'MasonryCtrl',
link: {
pre: function preLink(scope, element, attrs, ctrl) {
var attrOptions = scope.$eval(attrs.masonry || attrs.masonryOptions);
var options = angular.extend({
itemSelector: attrs.itemSelector || '.masonry-brick',
columnWidth: parseInt(attrs.columnWidth, 10) || attrs.columnWidth
}, attrOptions || {});
element.masonry(options);
var loadImages = scope.$eval(attrs.loadImages);
ctrl.loadImages = loadImages !== false;
var preserveOrder = scope.$eval(attrs.preserveOrder);
ctrl.preserveOrder = (preserveOrder !== false && attrs.preserveOrder !== undefined);
scope.$emit('masonry.created', element);
scope.$on('$destroy', ctrl.destroy);
}
}
};
}).directive('masonryBrick', function masonryBrickDirective() {
return {
restrict: 'AC',
require: '^masonry',
scope: true,
link: {
pre: function preLink(scope, element, attrs, ctrl) {
var id = scope.$id, index;
ctrl.appendBrick(element, id);
element.on('$destroy', function () {
ctrl.removeBrick(id, element);
});
scope.$on('masonry.reload', function () {
ctrl.scheduleMasonryOnce('reloadItems');
ctrl.scheduleMasonryOnce('layout');
});
scope.$watch('$index', function () {
if (index !== undefined && index !== scope.$index) {
ctrl.scheduleMasonryOnce('reloadItems');
ctrl.scheduleMasonryOnce('layout');
}
index = scope.$index;
});
}
}
};
});
}());

Like with many non-Angular libraries, it appears the answer lies in wrapping the library in an Angular directive.
I haven't tried it out but it appears that is what this person did

You can use angular's $emit, $broadcast, and $on functionality.
Inside your masonry directive link function:
scope.$on('$resizeMasonry', ctrl.scheduleMasonryOnce('layout'));
Inside your masonryBrick directive link function or any other child element:
scope.$emit('$resizeMasonry');
Use $emit to send an event up the scope tree and $broadcast to send an event down the scope tree.

How to set ng-disabled inside directive

My directive has
link: function ($scope, $elm, $attrs) {
var status = $scope.item.status
if (status) {
var statusName = status.name,
item = $scope.item;
if (statusName === 'USED') {
$attrs.$set('ng-disabled', true); // this doesn't work
} else {
$elm.attr('ng-disabled', false);
}
}
}
So, my question is:
How to apply ng-disabled to element with this directive?

if (statusName === 'USED') {
$attrs.$set('disabled', 'disabled');
} else {
$elm.removeAttr('disabled');
}
Why invoke ng-disable at all? You're already once evaluating the condition yourself, so having ng-disable evaluating it again is redundant.

You would set ng-disabled to a scope variable, ex:
<input ng-disabled="isDisabled" />
And then inside your directive you can set that variable:
$scope.isDisabled = true;

//html
<div ng-app="miniapp" ng-controller="MainCtrl">
<input type="submit" mydir>
</div>
//js
'use strict';
var app = angular.module('miniapp', []);
app.directive('mydir', function ($compile) {
return {
priority:1001, // compiles first
terminal:true, // prevent lower priority directives to compile after it
compile: function(el) {
el.removeAttr('mydir'); // necessary to avoid infinite compile loop
return function(scope){
var status = scope.item.status
if (status === 'USED') {
el.attr('ng-disabled',true);
} else {
el.attr('ng-disabled',false);
}
var fn = $compile(el);
fn(scope);
};
}
};
});
app.controller('MainCtrl', function ($scope) {
$scope.item = {};
$scope.item.status = 'USED';
});
credit to Ilan Frumer