Skip to content

Instantly share code, notes, and snippets.

@degrammer

degrammer/Index.html

Created November 19, 2015 04:21
Show Gist options
  • Save degrammer/7b98f67013521f153bad to your computer and use it in GitHub Desktop.
Save degrammer/7b98f67013521f153bad to your computer and use it in GitHub Desktop.
Download ZIP
Communication between components This bin will demostrate how to communicate a controller with a directive function after doing some action from the external DOM of the directive // source https://jsbin.com/cikomoq
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="This bin will demostrate how to communicate a controller with a directive function after doing some action from the external DOM of the directive">
<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>Communication between components</title>
<style id="jsbin-css">
body {
padding: 10px;
}
.category {
border-radius: 5px;
box-shadow: 1px 1px 5px 0px gray;
padding: 10px;
margin: 2px;
}
.category h1 {
text-transform: capitalize;
}
.category img {
border-radius: 5px;
box-shadow: 1px 1px 5px 0px gray;
float: left;
margin: 2px;
}
.category:after {
clear: both;
display: block;
content: '';
}
</style>
</head>
<body>
<p>This demo will load photos from lorem pixel</p>
<div ng-app="demo" ng-controller="demoController">
<div class="category" ng-repeat="category in categories">
<h1>{{category.name}}</h1>
<button ng-click="showDetails()">Load photos</button>
<photos load-trigger="showDetails" category="category"></photos>
</div>
<script id="jsbin-javascript">
(function(angular){
var app = angular.module("demo",[]);
//Controller for the demo
app.controller("demoController", function($scope){
$scope.categories = [{name:"sports"},{name:"people"}, {name:"nature"},{name:"animals"},{name:"food"},{name:"technics"},{name:"transport"}];
});
// Controller for Photos Category Directive
app.controller("photosController", function($scope){
this.loadPhotos = function(category){
var photos = [];
for(var i=0;i< 10;i++)
{
photos.push({category:category.name, index: i});
}
category.photos = photos;
};
});
app.directive("photos", function(){
return{
resctrict: 'E',
scope:{loadTrigger:'=', category:'='},
controller: 'photosController',
transclude: true,
template: (function(){
return '<div ng-repeat="photo in category.photos"><img ng-src="http://lorempixel.com/50/50/{{photo.category}}/{{photo.index}}" /></div>';
})(),
link: function(scope,el,attr,controller){
scope.loadTrigger = function(){
controller.loadPhotos(scope.category);
};
}
};
});
})(window.angular);
</script>
<script id="jsbin-source-css" type="text/css">body
{
padding:10px;
}
.category
{
h1{
text-transform: capitalize;
}
border-radius:5px;
box-shadow:1px 1px 5px 0px gray;
padding:10px;
margin:2px;
img{
border-radius:5px;
box-shadow:1px 1px 5px 0px gray;
float:left;
margin:2px;
}
&:after{
clear:both;
display:block;
content:'';
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function(angular){
var app = angular.module("demo",[]);
//Controller for the demo
app.controller("demoController", function($scope){
$scope.categories = [{name:"sports"},{name:"people"}, {name:"nature"},{name:"animals"},{name:"food"},{name:"technics"},{name:"transport"}];
});
// Controller for Photos Category Directive
app.controller("photosController", function($scope){
this.loadPhotos = function(category){
var photos = [];
for(var i=0;i< 10;i++)
{
photos.push({category:category.name, index: i});
}
category.photos = photos;
};
});
app.directive("photos", function(){
return{
resctrict: 'E',
scope:{loadTrigger:'=', category:'='},
controller: 'photosController',
transclude: true,
template: (function(){
return '<div ng-repeat="photo in category.photos"><img ng-src="http://lorempixel.com/50/50/{{photo.category}}/{{photo.index}}" /></div>';
})(),
link: function(scope,el,attr,controller){
scope.loadTrigger = function(){
controller.loadPhotos(scope.category);
};
}
};
});
})(window.angular);</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment