I am new to angular, started exploring the custom directives, I was trying to create a custom directive for applying isotope layout once the ng-repeat completes the loading
here is following code snippet
var app = angular.module('myApp', []);
app.directive('myDirective', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit(
$('.grid2').isotope({
layoutMode: 'masonry',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
})
);
});
}
}
}
});
app.controller('userNames', function($scope, $http) {
$http.get("apicall").success(function(response) {
$scope.names = response.response;
});
});
<div ng-controller="userNames">
<div class="grid2" my-directive ng-repeat="x in names">
<div class="box"><span>{{ x.username }}</span>
</div>
</div>
</div>
the code is not working please help in fixing this.
Related
I'm using a directive to insert a youtube player in my templates,
app.directive('youtube', function($window, youTubeApiService) {
return {
restrict: "E",
scope: {
videoid: "#"
},
template: '<div></div>',
link: function(scope, element, attrs, $rootScope) {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
youTubeApiService.onReady(function() {
player = setupPlayer(scope, element);
});
function setupPlayer(scope, element) {
return new YT.Player(element.children()[0], {
playerVars: {
autoplay: 0,
html5: 1,
theme: "light",
modesbranding: 0,
color: "white",
iv_load_policy: 3,
showinfo: 1,
controls: 1
},
videoId: scope.videoid,
});
}
scope.$watch('videoid', function(newValue, oldValue) {
if (newValue == oldValue) {
return;
}
Player.cueVideoById(scope.videoid);
});
}
};
});
My html looks something like this,
<div class="container-info">
<ul class="trailers">
<li>ePbKGoIGAXY</li>
<li>KlyknsTJk0w</li>
<li>nyc6RJEEe0U</li>
<li>zSWdZVtXT7E</li>
<li>Lm8p5rlrSkY</li>
</ul>
<div class="container-trailers">
<youtube videoid="ePbKGoIGAXY"></youtube>
</div>
</div>
What I want to do is click on one of the links and then change the value of videoid so a different youtube link is rendered.
<div class="container-info">
<ul class="trailers">
<li>ePbKGoIGAXY</li>
<li>KlyknsTJk0w</li>
<li>nyc6RJEEe0U</li>
<li>zSWdZVtXT7E</li> <-- clicked element
<li>Lm8p5rlrSkY</li>
</ul>
<div class="container-trailers">
<youtube videoid="zSWdZVtXT7E"></youtube> <-- new youtube link
</div>
</div>
You can use $watch and ng-click:
JSFiddle
HTML:
<div ng-app="app">
<div class="container-info">
<ul class="trailers">
<li>ePbKGoIGAXY</li>
<li>KlyknsTJk0w</li>
</ul>
<div class="container-trailers">
<youtube videoid="videoid"></youtube>
</div>
</div>
</div>
JS:
var app = angular.module("app", []);
app.directive('youtube', function($window) {
return {
restrict: "E",
scope: {
videoid: "="
},
template: '<div></div>',
link: function(scope, element, attrs, $rootScope) {
scope.$watch('videoid', function (newVal, oldVal) {
console.log(newVal);
});
}
};
});
Hello i have my directive:
myApp.directive('hoverDirective',function($document){
return function(scope, element, attr){
scope:{value:'foo'};
element('mouseover',function(event){
console.log(event);
});
}
});
And I have it working:
<div hover-directive>
{{value}}
</div>
But now I want to hardcode data in directive, and get it by factory.
I read about scope:{value:'foo'}. But i have error while i was putting it inside of return function.
Can anyone help ?
UPDATE: I try putting code inside of return function no results.
Please see here : http://jsfiddle.net/qeCDL/
HTML:
<div ng-app="app">
<div ng-controller="firstCtrl">
<div hover-directive></div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.directive('hoverDirective', function () {
return {
scope: {},
restrict: 'AE',
controller: function () {
},
template: '<h3>{{value}}</h3>',
link: function (scope, element, attrs) {
scope.value = "hove me";
element.on('mouseover', function (event) {
console.log(scope.value);
});
}
};
});
app.controller('firstCtrl', function ($scope) {
});
I created a directive that tweens like so:
app.directive('fadeInDown', function ($animate) {
var directive = {
link: link,
restrict: 'A',
};
return directive;
function link(scope, element, attrs) {
scope.$watch(attrs.delay, function (newVal) {
TweenMax.set(element, { position: 'relative' });
TweenMax.from(element, attrs.speed, { opacity: 0, top: '-20px', delay: attrs.delay, onComplete: done });
function done() {
var test = "DONE";
}
});
};
});
And I call it from my view like this:
<div id="home-view" class="body-wrapper" data-ng-controller="home as vm">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12" data-fade-in-down data-delay=".2" data-speed="1">
<div class="callout-box clearfix">
<div class="callout-content">
<h2 class="h1-section-title">BLAH BLAH BLAH.</h2>
</div>
</div>
</div>
</div>
</div>
The animation works perfectly, but I wanted to know how do I do this using $animate with angular 1.2.13???
I have tried the following:
app.directive('fadeInDown', function ($animate) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
scope.$watch(attrs.hideMe, function () {
$animate.addClass(element, "fade-in");
});
}
});
But how do you pass the parameters back to the animation????
The class is loaded in another module like this:
(function () {
'use strict';
var app = angular.module('app');
app.animation('.fade-in', function () {
return {
addClass: function(element, done) {
TweenMax.set(element, { position: 'relative' });
TweenMax.from(element, attrs.speed, { opacity: 0, top: '-20px', delay: attrs.delay, onComplete: done });
}
};
});
})();
Can anyone explain how to get this right???
PLEASE LET ME KNOW IF MY QUESTION IS NOT CLEAR.
Thanks!!!
I am having a problem with nested directives, in particular within the hide-element directive.
Firstly, there is an edit-mode directive that does not seem to work with ngAnimate. It would still hit hit addClass fade on button, but would not have ng-animate binded.
I tried moving the hide-element to a sibling element at divColumn and the edit-element directive works and does the animation on both buttons and divColumn.
It just doesn't work when they are nested. Why is that?
(I'm new to AngularJS, kindly enlighten me)
HTML
<!-- ngview has UIController everything here is nested within ngview -->
<h3>Data Page</h3>
<div class="divContainer" ng-mouseenter="fadeToggle()" ng-mouseleave="fadeToggle()">
<div style="overflow:hidden">
<div class="divHeader">Data Name</div>
<div class="divHeader">Parent Data</div>
<div class="divHeaderHidden" hide-element="isHidden">Edit</div>
</div>
<div ng-controller="myController">
<div ng-repeat="data in datas">
<div class="divRow" ng-mouseenter="fadeToggle();" ng-mouseleave="fadeToggle();">
<div class="divColumn">
{{data.name}}
</div>
<div class="divColumn">
{{data.parentData.name}}
</div>
<div class="divColumnHidden" hide-element="isHidden">
<button class="editColumnBtn" ng-click="editToggle()" edit-mode="isEdit">Edit</button>
<button class="removeColumnBtn" edit-mode="isEdit">Remove</button>
</div>
</div>
</div>
</div>
Angular
app.factory('Data', function($http) {
var dataService = {
getDepartment: function() {
var promise = $http.get('http://localhost/orgchart/app/json/data').then(function(response) {
return response.data;
});
return promise;
}
};
return dataService;
});
app.controller('UIController', ['$scope', function fadeController($scope) {
$scope.fadeToggle = function () {
this.isHidden = !this.isHidden;
};
}]);
app.controller('myController', ['$scope', 'Data', function myController($scope, Data) {
Data.getData().then(function(data) {
$scope.data = data;
});
$scope.editToggle = function() {
this.isEdit = !this.isEdit;
};
}]);
app.directive('editMode', ['$animate', function ($animate) {
return function(scope, element, attrs) {
scope.isEdit = false;
scope.$watch(attrs.editMode, function (newVal) {
if(newVal) {
$animate.addClass(element, 'fade');
}
else {
$animate.removeClass(element, 'fade');
}
});
};
}]);
app.directive('hideElement', ['$animate', function ($animate) {
return function(scope, element, attrs) {
scope.isHidden = true;
scope.$watch(attrs.hideElement, function (newVal) {
if(newVal) {
$animate.addClass(element, 'fade');
} else {
$animate.removeClass(element, 'fade');
}
});
};
}]);
app.animation(".fade", function() {
return {
addClass: function(element, className) {
TweenMax.to(element, 0.3, {opacity: 0});
},
removeClass: function(element, className) {
TweenMax.to(element, 0.3, {opacity: 1});
}
};
});
I'm wondering what's the way to do work this snippet:
//html
<div ng-app="app">
<div ng-controller="AppCtrl">
<a my-dir ng-repeat="user in users">{{user.name}}</a>
</div>
</div>
//js
var app = angular.module('app', []);
app.controller("AppCtrl", function ($scope) {
$scope.users = [{name:'John',id:1},{name:'anonymous'}];
$scope.fxn = function() {
alert('It works');
};
})
app.directive("myDir", function ($compile) {
return {
link:function(scope,el){
el.attr('ng-click','fxn()');
//$compile(el)(scope); with this the script go mad
}
};
});
I know it's about the compile phase
but I don't get the point so a short explanation would be
very appreciate.
A directive which adds another directive to the same element:
Similar answers:
How to get ng-class with $dirty working in a directive?
creating a new directive with angularjs
Here is a plunker: http://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview
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('my-dir'); // necessary to avoid infinite compile loop
el.attr('ng-click', 'fxn()');
var fn = $compile(el);
return function(scope){
fn(scope);
};
}
};
});
Much cleaner solution - not to use ngClick at all:
A plunker: http://plnkr.co/edit/jY10enUVm31BwvLkDIAO?p=preview
app.directive("myDir", function($parse) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('fxn()');
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};
});
You can try this:
<div ng-app="app">
<div ng-controller="AppCtrl">
<a my-dir ng-repeat="user in users" ng-click="fxn()">{{user.name}}</a>
</div>
</div>
<script>
var app = angular.module('app', []);
function AppCtrl($scope) {
$scope.users = [{ name: 'John', id: 1 }, { name: 'anonymous' }];
$scope.fxn = function () {
alert('It works');
};
}
app.directive("myDir", function ($compile) {
return {
scope: {ngClick: '='}
};
});
</script>