We Keep Coding

Communicate beween AngularJs filter() to AngularJs directive()

angular.module('myApp')
.filter('projectTeamPhotos', function($compile) {
return function(teams, element) {
if (teams.length == 0) {
return '';
}
var el = pageUrl; /* pageUrl global variable */
var html = '';
for (var i = 0; i < teams.length; i++) {
var url = el + 'files/image/' + teams[i].User.image;
var link = el + '#/employee/view-details/' + teams[i].User.unique_id;
var name = teams[i].User.name;
html += '<img check-image alt="image" class ="img-circle" src="' + url + '" />';
}
return html;
};
}).directive('checkImage', function($http) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
attrs.$observe('ngSrc', function(ngSrc) {
$http.get(ngSrc).success(function() {
alert('image exist');
}).error(function() {
alert('image not exist');
element.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg'); // set default image
});
});
}
};
});
HTML
<td ng-bind-html="project.ProjectTeam | projectTeamPhotos"></td>
See screenshot:
Here I have posted my filter and directive code. I want to access checkImage directive in my projectTeamPhotos filter.
I have called check-image directive in my image tag which content in the projectTeamPhotos filter. But my check-image directive not working. Please help me and say me how to access my directive in my filter?
JSFIDDLE

Angular directive function param camel case not working

I have an Angular 1.5.8 directive with isolated scope and two functions being passed in. I have found that when the names of these functions are all lower case that they work correctly but if they are camelCased then they do not work.
Note that I am talking about the value of the param not the param name itself. here's the html that uses the directive:
<buttons-radio model="contactInformationAcceptable" disabled="approved" callback="personalapprovalfieldchanged()" focus="focuscallback($event)"></buttons-radio>
Note the case of the callback and focus values. If I change these to camel case (and change the function definitions in the parent scope) then they don't work.
Here is the directive:
angular.module("manageApp").directive('buttonsRadio', ['$timeout', function ($timeout) {
return {
restrict: 'E',
scope: {
model: '=',
disabled: '=',
callback: '&',
focus: '&'
},
template: '<div class="form-group yesorno"> ' +
' <div class="col-xs-12">' +
' <button type="button" class="btn btn-success" ng-disabled="disabled" ng-class="{active: yesValue}" ng-click="clickYes()" ng-focus="localFocus($event)">Yes</button>' +
' <button type="button" class="btn btn-danger" ng-disabled="disabled" ng-class="{active: noValue}" ng-click="clickNo()" ng-focus="localFocus($event)">No</button>' +
' </div>' +
'</div>',
controller: function ($scope) {
$scope.$watch('model', function (value) {
if (value) {
if (value == 0) {
$scope.yesValue = false;
$scope.noValue = false;
}
if (value == 1) {
$scope.yesValue = true;
$scope.noValue = false;
}
if (value == 2) {
$scope.yesValue = false;
$scope.noValue = true;
}
}
});
$scope.localFocus = function ($event) {
$scope.focus({ $event: $event });
}
$scope.performCallback = function () {
$timeout(function () {
$scope.callback();
});
}
$scope.yesValue = false;
$scope.noValue = false;
$scope.clickYes = function () {
$scope.yesValue = !$scope.yesValue;
if ($scope.yesValue) {
$scope.noValue = false;
$scope.model = 1;
} else {
$scope.model = 0;
}
$scope.performCallback();
}
$scope.clickNo = function () {
$scope.noValue = !$scope.noValue;
if ($scope.noValue) {
$scope.yesValue = false;
$scope.model = 2;
} else {
$scope.model = 0;
}
$scope.performCallback();
}
}
}
}]);
Edit: Here is the parent controller that has the function I need to use:
angular.module("manageApp").controller('approvalPersonalController', ['$scope', '$http',
function ($scope, $http) {
//personalApprovalFieldChanged personalapprovalfieldchanged
$scope.personalapprovalfieldchanged = function () {
//a field has changed so save them all
console.log('field has changed - do something');
};
}]);
I am confused as to why this is as I have been through a Pluralsight course on directives and the camel case works OK in the plunks that I have created from the course but not in this real world example.
It does work (calls the correct functions at the correct times) but I would like to use camel case for the function names if possible.
Thanks

Show directive one at a time AngularJS

I am trying to use multiple directive in one page such that only one datepicker should be enable at one time, I tried by adding dynamic class but somehow I need to double click in input box to hide another. Let me know what I am doing wrong here.
Working Plnkr - http://plnkr.co/edit/ZcJr9zg9PeUeRX4kRhbW?p=preview
HTML Code -
<body ng-controller="mainCtrl">
<div class="" ng-repeat="row in fakeDataSet" style="height: 150px; float: left;">
<my-datepicker
dateid="dateid"
first-week-day-sunday="true"
placeholder="Choose date"
view-format="Do MMMM YYYY"
checkval="$index">
</my-datepicker>
</div>
</body>
JS Code -
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', function($scope){
$scope.fakeDataSet = [34,787,56,78];
})
myApp.directive('myDatepicker', ['$document', function($document) {
'use strict';
var setScopeValues = function (scope, attrs) {
scope.format = attrs.format || 'YYYY-MM-DD';
scope.viewFormat = attrs.viewFormat || 'Do MMMM YYYY';
scope.locale = attrs.locale || 'en';
scope.firstWeekDaySunday = scope.$eval(attrs.firstWeekDaySunday) || false;
scope.placeholder = attrs.placeholder || '';
};
return {
restrict: 'EA',
scope: {
checkval: "="
},
link: function (scope, element, attrs, ngModel) {
scope.dynamicMyDatePicker = 'my-datepicker' + "_" + scope.checkval,
scope.dynamicMyDatePickerInput = 'my-datepicker-input' + "_" + scope.checkval;
setScopeValues(scope, attrs);
scope.calendarOpened = false;
scope.days = [];
scope.dayNames = [];
scope.viewValue = null;
scope.dateValue = null;
moment.locale(scope.locale);
var date = moment();
var generateCalendar = function (date) {
var lastDayOfMonth = date.endOf('month').date(),
month = date.month(),
year = date.year(),
n = 1;
var firstWeekDay = scope.firstWeekDaySunday === true ? date.set('date', 2).day() : date.set('date', 1).day();
if (firstWeekDay !== 1) {
n -= firstWeekDay - 1;
}
//Code to fix date issue
if(n==2)
n = -5;
scope.dateValue = date.format('MMMM YYYY');
scope.days = [];
for (var i = n; i <= lastDayOfMonth; i += 1) {
if (i > 0) {
scope.days.push({day: i, month: month + 1, year: year, enabled: true});
} else {
scope.days.push({day: null, month: null, year: null, enabled: false});
}
}
};
var generateDayNames = function () {
var date = scope.firstWeekDaySunday === true ? moment('2015-06-07') : moment('2015-06-01');
for (var i = 0; i < 7; i += 1) {
scope.dayNames.push(date.format('ddd'));
date.add('1', 'd');
}
};
generateDayNames();
scope.showCalendar = function () {
scope.calendarOpened = true;
generateCalendar(date);
};
scope.closeCalendar = function () {
scope.calendarOpened = false;
};
scope.prevYear = function () {
date.subtract(1, 'Y');
generateCalendar(date);
};
scope.prevMonth = function () {
date.subtract(1, 'M');
generateCalendar(date);
};
scope.nextMonth = function () {
date.add(1, 'M');
generateCalendar(date);
};
scope.nextYear = function () {
date.add(1, 'Y');
generateCalendar(date);
};
scope.selectDate = function (event, date) {
event.preventDefault();
var selectedDate = moment(date.day + '.' + date.month + '.' + date.year, 'DD.MM.YYYY');
ngModel.$setViewValue(selectedDate.format(scope.format));
scope.viewValue = selectedDate.format(scope.viewFormat);
scope.closeCalendar();
};
// if clicked outside of calendar
//var classList = ['my-datepicker', 'my-datepicker-input'];
var classList = [];
classList.push(scope.dynamicMyDatePicker);
classList.push(scope.dynamicMyDatePickerInput);
if (attrs.id !== undefined) classList.push(attrs.id);
$document.on('click', function (e) {
if (!scope.calendarOpened) return;
var i = 0,
element;
if (!e.target) return;
for (element = e.target; element; element = element.parentNode) {
var id = element.id;
var classNames = element.className;
if (id !== undefined) {
for (i = 0; i < classList.length; i += 1) {
if (id.indexOf(classList[i]) > -1 || classNames.indexOf(classList[i]) > -1) {
return;
}
}
}
}
scope.closeCalendar();
scope.$apply();
});
},
template:
'<div><input type="text" ng-focus="showCalendar()" ng-value="viewValue" class="my-datepicker-input" ng-class="dynamicMyDatePickerInput" placeholder="{{ placeholder }}"></div>' +
'<div class="my-datepicker" ng-class="dynamicMyDatePicker" ng-show="calendarOpened">' +
' <div class="controls">' +
' <div class="left">' +
' <i class="fa fa-backward prev-year-btn" ng-click="prevYear()"></i>' +
' <i class="fa fa-angle-left prev-month-btn" ng-click="prevMonth()"></i>' +
' </div>' +
' <span class="date" ng-bind="dateValue"></span>' +
' <div class="right">' +
' <i class="fa fa-angle-right next-month-btn" ng-click="nextMonth()"></i>' +
' <i class="fa fa-forward next-year-btn" ng-click="nextYear()"></i>' +
' </div>' +
' </div>' +
' <div class="day-names">' +
' <span ng-repeat="dn in dayNames">' +
' <span>{{ dn }}</span>' +
' </span>' +
' </div>' +
' <div class="calendar">' +
' <span ng-repeat="d in days">' +
' <span class="day" ng-click="selectDate($event, d)" ng-class="{disabled: !d.enabled}">{{ d.day }}</span>' +
' </span>' +
' </div>' +
'</div>'
};
}]);

You can use the mousedown event to close the calendar:
$document.on('mousedown', function (e) {
scope.closeCalendar();
scope.$apply();
});
Additionally you would have to stop the propagation of the mousedown event triggered on the calendar itself so it doesn't close itself when you select a date:
<div class="my-datepicker" ng-show="calendarOpened" ng-mousedown="$event.stopPropagation()">
To be able to put the selected date into the input, have the following code in selectDate() method:
scope.val = selectedDate.format(scope.format);
and bind the val variable to the input element:
<input type="text" ng-focus="showCalendar()" ng-model="val" .../>
Here the Plunker.

There are a few approaches to solve this problem:
Put a document 'click' handler inside the directive link() function, to check if the click was done inside the current directive element or not.
This is basically your solution, although it can be improved by using jQuery $.closest() method: https://api.jquery.com/closest/
Use a more structured approach, and aggregate the list of calendar directives under another directive, that is responsible for synchronizing the calendarOpened flag for all of them.
Such a directive would listen to the array of calendarOpened values for all the calendar directives, and make sure only one of them stays true after there is a change (a calendar is opened/closed)

The way I think you should go forward with this is to implement a myDatepickerService which handles all of the logic of hiding/showing and keeping only a datepicker.
Here's some "pseudocode" to get your mind started:
myApp.service('myDatepickerService', function () {
this.datepickers = [];
this.currentDatepicker = null;
this.openDatepicker = function($scope) {
if (this.currentDatepicker) {
this.closeDatepicker();
}
this.currentDatepicker = $scope;
$scope.showCalendar(); // From your linking function
};
this.closeDatepicker = function () {
this.currentDatepicker.closeCalendar();
this.currentDatepicker = null;
};
});
Then on your directive:
myApp.directive('myDatepicker', ['myDatepickerService', function(myDatepickerService) {
return {
restrict: 'EA',
scope: {
checkval: "="
},
link: function($scope, el, attrs) {
$scope.open = function () {
myDatepickerService.openDatepicker($scope);
};
el.on('click', $scope.open);
}
};
});
EDIT: Adding more into why I think this is the good way to go.
So, IMHO you're putting a lot of responsibility on each datepicker and it's also not efficient, since all the code that listens for the click on the $document is run everytime that a new datepicker is created and, what's even worst is that everytime a click reaches the $document it will run on every single datepicker. In this way, you're separating this code from every element and making it go to the Service.
Also, for what is worth, I think you should put the logic into the controller instead of the linking function but that's another story!

How to change attribute on a selected directive from a controller

I build an application with interactive SVG map with angular.js
Whole app controlled by controller, svg wrapped in a directive, and every <path> in svg is a partial directive too.
When user clicked on a wall, <path> id is memorized in a custom service and next when user select a color, I need to fill this wall with that color.
The problem is that I can't access directive within a controller. I also cant share a scope with a directive because i have multiple nested directives in my controller and want to access them by id.
Maybe there is a design mistake? how can I achieve this workflow?
There is my code for controller, service and directives
ColorPicker Controller
app.controller("ColorPicker", function($scope, $timeout, appConfig, ColorService) {
$scope.colors = [];
$scope.currentColorSet = 0;
$scope.svgTemplateUrl = appConfig.arSvg[$scope.$parent.roomType.id][$scope.$parent.roomStyle.id] + 'over.svg';
$scope.maxColorSet = Math.max.apply(Math, jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors.map(function(color) {
return color.color.group;
}));
$scope.sliderConfig = {
min: 0,
max: $scope.maxColorSet,
step: 1
}
$scope.emptyColors = ( ColorService.getColors().length === 0 );
$scope.currentProps = {};
$scope.applyColor = function(color) {
console.log($scope.currentProps);
//**here I need to set fill with selected color to selected directive**
}
$scope.prevColorSet = function(){
if($scope.currentColorSet > 0) {
$scope.currentColorSet--;
generateColorSet($scope.currentColorSet);
}
}
$scope.nextColorSet = function(){
if($scope.currentColorSet < $scope.maxColorSet) {
$scope.currentColorSet++;
generateColorSet($scope.currentColorSet);
}
}
generateColorSet = function(setIndex){
$scope.colors = [];
for(var i = 0; i < jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors.length; i++){
if(jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors[i].color.group == setIndex) {
$scope.colors.push(jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors[i].color)
}
}
}
generateColorSet($scope.currentColorSet);
$scope.$watch("currentColorSet", function(newValue, oldValue) {
generateColorSet($scope.currentColorSet);
});
});
Directive for whole SVG
app.directive('svgmap', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var svg = $(element).find('svg');
svg.removeAttr('xmlns:a');
svg.attr('width', '869px');
svg.attr('height', '489px');
element.append(svg);
var regions = element[0].querySelectorAll('path');
angular.forEach(regions, function (path, key) {
var regionElement = angular.element(path);
regionElement.attr("region", "");
$compile(regionElement)(scope);
});
},
}
}]);
Directive for region (wall)
app.directive('region', ['$compile','ColorService','$timeout', function ($compile, ColorService, $timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.properties = {
elementId : element.attr("id"),
stroke: '',
fill: '#fff'
};
scope.regionClick = function () {
scope.currentProps = scope.properties;
if(ColorService.selectedRegion != scope.properties.elementId) {
scope.properties.stroke = '#e5514e';
ColorService.selectedRegion = scope.properties.elementId;
} else {
scope.properties.stroke = '';
ColorService.selectedRegion = '';
}
console.log('click: ' + scope.properties.elementId + ' : ' + scope.properties.stroke);
};
scope.setStroke = function () {
scope.stroke = '#e5514e';
};
scope.removeStroke = function() {
if(ColorService.selectedRegion != scope.properties.elementId) {
scope.properties.stroke = '';
}
//console.log('enter: ' + scope.elementId + ' : ' + scope.stroke);
};
scope.removeColor = function() {
console.log('removed');
scope.properties.fill = '#fff';
ColorService.remove(scope.properties.elementId);
};
ColorService.getColors().forEach(function(item) {
if(item.id === scope.properties.elementId) {
scope.properties.fill = item.info.val;
}
});
element.attr("ng-click", "regionClick()");
element.attr("ng-attr-stroke", "{{properties.stroke}}");
element.attr("ng-attr-fill", "{{properties.fill}}");
element.attr("ng-mouseenter", "setStroke()");
element.attr("ng-mouseleave", "removeStroke()");
element.attr("ng-right-click", "removeColor()");
element.after('<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />');
element.removeAttr("region");
$compile(element)(scope);
}
}
}]);

How to re-render directive after a variable is changed?

I am using a directive for star rating. But the template the is loaded before data is loaded from HTTP. So i want to reload directive template after HTTP request is successful.
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" type="text/javascript"></script>
</head><body>
<div ng-app="myapp" ng-controller="movieCtrl">
<div star-rating rating="starRating" read-only="false" max-rating="10" click="click(param)" mouse-hover="mouseHover(param)"
mouse-leave="mouseLeave(param)"></div>
</div></body></html>
JS
var app = angular.module('myapp', []);
app.controller("movieCtrl", function($scope, $http) {
$scope.starRating = 0;
$scope.hoverRating = 0;
$scope.mouseHover = function(param) {
$scope.hoverRating1 = param;
};
$scope.mouseLeave = function(param) {
$scope.hoverRating1 = param + '*';
};
//problem here
//actual data coming via http
//when value is changed i want to re-render below directive template
setTimeout(function() {
$scope.starRating = 5
}, 1000);
});
app.directive('starRating', function() {
return {
scope: {
rating: '=',
maxRating: '#',
readOnly: '#',
click: "&",
mouseHover: "&",
mouseLeave: "&"
},
restrict: 'EA',
template: "<div style='display: inline-block; margin: 0px; padding: 0px; cursor:pointer;' ng-repeat='idx in maxRatings track by $index'> \
<img ng-src='{{((hoverValue + _rating) <= $index) && \"http://www.codeproject.com/script/ratings/images/star-empty-lg.png\" || \"http://www.codeproject.com/script/ratings/images/star-fill-lg.png\"}}' \
ng-Click='isolatedClick($index + 1)' \
ng-mouseenter='isolatedMouseHover($index + 1)' \
ng-mouseleave='isolatedMouseLeave($index + 1)'></img> \
</div>",
compile: function(element, attrs) {
if (!attrs.maxRating || (Number(attrs.maxRating) <= 0)) {
attrs.maxRating = '5';
};
},
controller: function($scope, $element, $attrs) {
$scope.maxRatings = [];
for (var i = 1; i <= $scope.maxRating; i++) {
$scope.maxRatings.push({});
};
$scope._rating = $scope.rating;
$scope.isolatedClick = function(param) {
if ($scope.readOnly == 'true') return;
$scope.rating = $scope._rating = param;
$scope.hoverValue = 0;
$scope.click({
param: param
});
};
$scope.isolatedMouseHover = function(param) {
if ($scope.readOnly == 'true') return;
$scope._rating = 0;
$scope.hoverValue = param;
$scope.mouseHover({
param: param
});
};
$scope.isolatedMouseLeave = function(param) {
if ($scope.readOnly == 'true') return;
$scope._rating = $scope.rating;
$scope.hoverValue = 0;
$scope.mouseLeave({
param: param
});
};
}
};
});
See Codepen for more info.

Here is a simple rating directive which uses stars, note that the logic is in the link function, rather than the controller.
function starRating() {
return {
restrict: 'EA',
template:
'<ul class="star-rating" ng-class="{readonly: readonly}">' +
// see ng-repeat here? this will update when scope.stars is updated
' <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
' <i class="fa fa-star"></i>' + // or &#9733
' </li>' +
'</ul>',
scope: {
ratingValue: '=ngModel',
max: '=?', // optional (default is 5)
onRatingSelect: '&?', // callback
readonly: '=?' // set whether this should be changeable or not
},
link: function(scope, element, attributes) {
if (scope.max == undefined) {
scope.max = 5;
}
function updateStars() { // update to rating value
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
scope.toggle = function(index) {
if (scope.readonly == undefined || scope.readonly === false){
scope.ratingValue = index + 1;
scope.onRatingSelect({
rating: index + 1
});
}
};
scope.$watch('ratingValue', function(oldValue, newValue) {
if (newValue) {
updateStars();
}
});
}
};
}

Use $scope.$apply() on setTimeout function and your code will work fine
also i have made simple modification to your code .. check here
i created a service to share data b/n controllers
added some $watch function to detect value change
var app = angular.module('myapp', []);
app.controller("movieCtrl", function($scope, $http, share) {
$scope.starRating = 0;
$scope.hoverRating = 0;
$scope.mouseHover = function(param) {
$scope.hoverRating1 = param;
};
$scope.mouseLeave = function(param) {
$scope.hoverRating1 = param + '*';
};
$scope.$watch('starRating', function() {
share.rating = $scope.starRating
});
setTimeout(function() {
console.log('timeout set');
$scope.starRating = 5;
$scope.$apply();
}, 1000);
});
app.factory('share', function() {
var obj = {
rating: 0
}
return obj;
});
app.directive('starRating', function() {
return {
scope: {
rating: '=',
maxRating: '#',
readOnly: '#',
click: "&",
mouseHover: "&",
mouseLeave: "&"
},
restrict: 'EA',
templateUrl: "star1.html",
compile: function(element, attrs) {
if (!attrs.maxRating || (Number(attrs.maxRating) <= 0)) {
attrs.maxRating = '5';
};
},
controller: function($scope, $element, $attrs, share) {
$scope.maxRatings = [];
$scope.rating = share.rating;
$scope.$watch('rating', function() {
$scope._rating = share.rating;
});
for (var i = 1; i <= $scope.maxRating; i++) {
$scope.maxRatings.push({});
};
$scope._rating = share.rating;
$scope.isolatedClick = function(param) {
if ($scope.readOnly == 'true') return;
$scope.rating = $scope._rating = param;
$scope.hoverValue = 0;
$scope.click({
param: param
});
};
$scope.isolatedMouseHover = function(param) {
if ($scope.readOnly == 'true') return;
$scope._rating = 0;
$scope.hoverValue = param;
$scope.mouseHover({
param: param
});
};
$scope.isolatedMouseLeave = function(param) {
if ($scope.readOnly == 'true') return;
$scope._rating = $scope.rating;
$scope.hoverValue = 0;
$scope.mouseLeave({
param: param
});
};
}
};
});