I am new to ionic.I am creating a app with user list i have succesfully populated users list.but i want to popup particular users profile picture whenever i click on picture. Like whatsapp popup window.
i am unable to do it.following is my code.
app.js
angular.module('shoppingPad', ['ionic','shoppingPad.controller', 'shoppingPad.service'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/chat.html',
controller: 'ChatCtrl'
}
}
})
.state('tab.chat-details', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-details.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.groups',{
url:'/groups',
views: {
'tab-chats':{
templateUrl:'templates/groups.html',
controller:'groupCtrl'
}
}
})
.state('tab.newGroups',{
url:'/new',
views: {
'tab-chats':{
templateUrl:'templates/newGroup.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/chats');
});
controller.js:
angular.module('shoppingPad.controller', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatCtrl', function($scope, Contents) {
//$scope.contents = Contents.query();
$scope.contents = Contents.all();
$scope.remove = function(chat) {
Contents.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Contents, $ionicPopup) {
alert('details');
// $scope.contents = Contents.get({content_id: $stateParams.content_id});
//alert($stateParams.content_id);
$scope.content = Contents.get($stateParams.chatId);
alert($stateParams.chatId);
alert('data');
$scope.showPopup=function(){
alert('alertpopup');
var alertPopup=$ionicPopup.alert({
title:'hey',
templateUrl:'templates/chat-details.html'
});
alertPopup.then(function(res){
console.log('popup');
});
};
})
.controller('groupCtrl',function($scope,Groups){
$scope.groups=Groups.group();
});
chatServices.js
angular.module('shoppingPad.service',['ngResource']).
factory('Contents',function() {
//return $resource('http://54.86.64.100:3000/api/v1/content/content-info');
var contents = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'img/ben.png'
}, {
id: 1,
name: 'a',
lastText: 'Hey, it\'s me',
face: 'img/007.gif'
}, {
id: 2,
name: 'b',
lastText: 'I should buy a boat',
face: 'img/ionic.png'
}, {
id: 3,
name: 'c',
lastText: 'Look at my mukluks!',
face: 'img/profile-no-photo.png'
}, {
id: 4,
name: 'd',
lastText: 'This is wicked good ice cream.',
face: 'img/profile-unknown-male.png'
}];
return {
all: function() {
return contents;
},
remove:function(content){
contents.splice(contents.indexOf(content),1);
},
get:function(chatId) {
for (var i = 0; i < contents.length; i++) {
if (contents[i].id === parseInt(chatId)) {
return contents[i];
}
}
return null;
}
};
});
chat.html
<ion-view view-title="Chats">
<ion-header-bar class="bar-subheader bar-light">
Groups
New group
</ion-header-bar>
<ion-content>
<ion-list>
<div class="modal image-modal transparent" ng-click="showPopup()">
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents" type="item-text-wrap" href="#/tab/chats/{{content.id}}">
<img ng-src="{{content.face}}" >
<h2>{{content.name}}</h2>
<p>{{content.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(content)">
Delete
</ion-option-button>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Add below code in your ChatCtrl in controller.js file
$ionicModal.fromTemplateUrl('user_photo.html', { // Use Ionic Modal to show user photo
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.showUser = function (user, event){
if (event){
event.stopPropagation(); //to prevent calling of showUser() and showPop() functions at same time
}
$scope.current_user = user;
$scope.openModal();
}
Note: Don't forget to inject $ionicModal service to your controller
.controller('ChatCtrl', function($scope, Contents, $ionicModal) {
And below code with user_photo.html template and showUser() function on user thumbnail is for your chat.html file
Note: Replace the whole code in chat.html with below code
<style type="text/css">
.image-modal {
width: 100% !important;
height: 100%;
top: 0 !important;
left: 0 !important;
}
.transparent {
background: rgba(0, 0, 0, 0.7);
}
.image {
width: 100%;
height: 600px;
background-size: contain;
background-repeat: no-repeat;
background-position: center, center;
}
</style>
<ion-view view-title="Chats">
<ion-header-bar class="bar-subheader bar-light">
Groups
New group
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents"
type="item-text-wrap" href="#/tab/chats/{{content.id}}" ng-click="showPopup()">
<img ng-src="{{content.face}}" ng-click="showUser(content, $event)">
<h2>{{content.name}}</h2>
<p>{{content.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(content)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
<script id="user_photo.html" type="text/ng-template">
<div class="modal image-modal transparent" on-swipe-down="closeModal()">
<ion-scroll direction="xy"
zooming="true" min-zoom="1" style="width: 100%; height: 100%"
overflow-scroll="false">
<div class="image" style="background-image: url( {{current_user.face}} )"></div>
</ion-scroll>
</div>
</script>
</ion-content>
</ion-view>
You can use ionic modal
angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
<html>
<head>
<script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
</head>
<body>
<div ng-app="ionicApp">
<ion-content has-tabs="true" ng-controller="MyController">
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
<p class="padding">
<button class="button button-positive button-block button-outline" ng-click="openModal()">Trigger modal</button>
</p>
</ion-content>
</div>
</body>
</html>
Related
I am trying to create my own directive to highlight selected menu (I know this can be done with ui-sref and ui-sref-active but I need to expand my directive a bit more later on).
I can't get the element to trigger the directive. I want to be able to change a colour of a selected menu but it doesn't even trigger it to start with. I don't get what I'm doing wrong...
angular.module('app', ['ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('home', {
template: '<h2>HOME</h2>'
})
.state('about', {
template: '<h2>ABOUT</h2>'
})
.state('contact', {
template: '<h2>CONTACT</h2>'
});
})
.directive('isMenuActive', ['$state', function($state) {
return {
restrict: 'A',
scope: {
matches: '=isMenuActive'
},
link: function(scope, element, attrs) {
console.log('trigger directive');
for (var i in scope.matches) {
var match = scope.matches[i];
if ($state.current.name.includes(match)) {
console.log('element', element);
element.addClass('active');
break;
}
}
}
}
}])
.controller('mainCtrl', function($state) {
var vm = this;
vm.menus = [
{
name: 'Home',
route: 'home',
matches: ['home', 'some-other-route']
},
{
name: 'About',
route: 'about',
matches: ['about', 'other-route']
},
{
name: 'Contact',
route: 'contact',
matches: ['contact', 'another-route']
}
];
vm.go = function(route) {
$state.go(route);
}
})
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin-right: 20px;
cursor: pointer;
font-weight: bold;
}
ul li:hover {
opacity: 0.7;
}
.active a {
color: red;
}
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as vm">
<ul>
<li ng-repeat="menu in vm.menus" ng-click="vm.go(menu.route)" is-menu-active="menu.matches">
<a>{{menu.name}}</a>
</li>
</ul>
</div>
<div ui-view></div>
</body>
</html>
Iam new to AngularJS and was stuck at the concept of angular nested views with single controller. Gone through some examples here, which didn't help me. Below is the code from a question and I need 2 things here. After clicking on submit:
1.The date selected has to be assigned as input and url has to be constructed based on the date selected and the result from that url has to be displayed in Modal.
2.At the same time a table(present in tab-submit.html) has to displayed in the page(in tab.html) below the submit button from another URL.
Below is the code I have in app.js:
wc.controller('MyController', function ($scope, $modal, $log, $http, $location, $filter) {
var that = this;
var in10Days = new Date();
in10Days.setDate(in10Days.getDate() + 10);
$scope.dates = {
date3: " "
};
this.dates = {
date3: new Date()
};
this.open = {
date3: false
};
// Disable weekend selection
this.disabled = function (date, mode) {
return (mode === 'day' && (new Date().toDateString() == date.toDateString()));
};
this.dateOptions = {
showWeeks: false,
startingDay: 1
};
this.timeOptions = {
readonlyInput: false,
showMeridian: false
};
this.dateModeOptions = {
minMode: 'year',
maxMode: 'year'
};
this.openCalendar = function (e, date) {
that.open[date] = true;
};
$scope.format = 'yyyy-MM-dd%20HH:mm';
debugger;
$scope.open = function () {
var date = $filter("date")($scope.dates.date3, $scope.format);
$http.get(http://myurlPartA+date+"myurlPartB")
.success(function (response) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return response;
}
}
});
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Here is a plunker:http://plnkr.co/edit/xKbkFGoa3p5y5NAzueut?p=preview. Is it possible to get solution for my question??Hope anyone will help me to understand this.
Thanks in advance!!
Requirements
1. Have a page with two tabs
2. If click the tab1, should load the page with date picker and a submit button
3. After selecting a date picker I will click the submit button
4. Then from a url I should get the data for particular date which I have selected.
5. There will be two api calls, one for modal and one for table
6. Then modal should show up with the data
7. After closing the modal, table should below the submit button
As I understood from your discussion, I think this is what you wanted to do.
Have a page with two tabs
If click the tab1, should load the page with date picker and a submit button
After selecting a date picker I will click the submit button
Then from a url I should get the data for particular date which I have selected.
There will be two api calls, one for modal and one for table
Then modal should show up with the data
After closing the modal, table should below the submit button
I saw few issues in your codes.
Some issues in Directive, the way you use
Getting data from api
How you open and close the modal
How you print data in table
I have a updated, working Plunker here.
Please find the below code changes. In the codes you are getting the codes for Modal. but I dont know how you will bind it. Please change it as you want.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkgrey;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.full.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="ui-bootstrap-tpls.js"></script>
<script src="datetime-picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="application.js"></script>
</head>
<body ng-app="wc">
<ul>
<li><a ui-sref="tab">Tab1</a></li>
<li><a ui-sref="tabs">Tab2</a></li>
</ul>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
application.js
var wc = angular.module('wc', ['ui.router','ui.bootstrap', 'ui.bootstrap.datetimepicker']);
wc.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/posts');
$stateProvider
.state('tab', {
url: '/tab1',
templateUrl: 'tab.html'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'tabs.html',
});
});
wc.controller('SampleController', function ($scope, $http, $modal) {
$scope.subt_click = function () {
//Selected Date is here use as you want
//$scope.mydate
alert($scope.mydate);
//Modal Data
$http.get("http://jsonplaceholder.typicode.com/posts")
.success( function(response) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalController',
resolve: {
items: function () {
return response;
}
}
});
});
//Table Data
$http.get("http://jsonplaceholder.typicode.com/posts")
.success( function(response) {
$scope.tableData = response;
});
};
});
wc.controller('ModalController', function ($scope, $modalInstance, items) {
$scope.modalData = items;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
wc.directive('datetimepicker', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datetimepicker({
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
Tab.html
<div class="jumbotron text-top" ng-controller="SampleController">
<h4>Select from below:</h4>
<form class="form-horizontal">
<input datetimepicker="" ng-model="mydate" type="text" readonly-input="true" />
<a class="btn btn-info" ng-click="subt_click()">Submit</a>
</form>
<div class="table-responsive" ng-show="tableData.length > 0">
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in tableData">
<td>{{x.id}}</td>
<td>{{x.body}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Info</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="x in modalData">
{{ x.id + '-' + x.title}}
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
$stateProvider is best used for navigating to an entirely different page in your app . For modals , dom animations ect .. This should be put in a directive .
Example
wc.directive('modal', function(){
return {
restrict: "A",
template: 'modal.html' // FYI the html for the actual modal popup
link: function(scope,elem,attrs){
$(".modal").show();
}
}
})
for instance ; in your modal.html would contain something like this
<div class="modal" style="display:none;">
</div>
then in your main document
<div modal></div>
//Or you can place this on whatever element you desire to show the modal
<div ng-controller = "MyController">
<ul class="items" >
<div ng-repeat="item in colors" ng-class="{active:isActive(item)}" ng-click="select(item); whattoshow=!whattoshow">
<li class="col-md-3 col-sm-3 col-lg-3 col-xs-3" >
<img class="img-responsive" ng-src="images/colors/{{item.number}}.jpg">
</li>
<div class="col-md-12 col-sm-12 col-lg-12 col-xs-12" ng-class="whattoshow && isActive(item) ? 'show' : 'hidden'}">
<h2>{{item.bio}}</h2>
</div>
</div>
</ul>
</div>
That is my HTML code, the controller uses a JSON file to go through the items, and if you click on an item you shall see the description of it. As I try to show in this poorly drawn picture (http://i.stack.imgur.com/FCvmd.png), I can make the item bio appear after the item's picture, but as every description corresponds to its own item picture it makes my display order to change. I want every items description show on click below his own row of items.
Here is my angular controller if needed.
var myApp = angular.module('ProjectAssembly', []);
myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('data/color.json').success(function(data) {
$scope.colors = data;
});
$scope.select= function(item) {
$scope.selected = item;
};
$scope.isActive = function(item) {
return $scope.selected === item;
};
}]);
I hope you can help my case, it seemed to be easy, but I can't find the solution :/
What you need is ng-repeat-start and ng-repeat-end and split your data into rows.
See details in example:
var myApp = angular.module('ProjectAssembly', []);
myApp.controller('MyController', ['$scope', '$http',
function($scope, $http) {
//$http.get('data/color.json').success(function(data) {});
$scope.colors = [{
number: 1,
bio: '1111111111111111111111111111111111111111'
}, {
number: 2,
bio: '2222222222222222222222222222222222222222'
}, {
number: 3,
bio: '33333333333333333333333333333333333333333'
}, {
number: 4,
bio: '4444444444444444444444444444444444444444'
}, {
number: 5,
bio: '55555555555555555555555555555'
}]
$scope.colors = (function(data) {
var result = [];
angular.forEach(data, function(val, index) {
var key = Math.floor(index / 4);
if (!result[key]) {
result[key] = [];
}
result[key].push(val);
});
return result;
})($scope.colors);
$scope.select = function(item, rowIndex, columnIndex) {
if (item == $scope.selected) {
$scope.selected = null;
$scope.selectedRowIndex = null;
$scope.selectedColumnIndex = null;
return false;
}
$scope.selected = item;
$scope.selectedRowIndex = rowIndex;
$scope.selectedColumnIndex = columnIndex;
};
$scope.isActive = function(item) {
return $scope.selected === item;
};
}
]);
.item-tr {
border: 1px solid #555;
margin-top: 5px;
position: relative;
background: #555;
}
.item-tr:before {
content: ' ';
position: absolute;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #555;
top: -11px;
}
.item-tr-0:before {
left: 12.5%;
}
.item-tr-1:before {
left: 37.5%;
}
.item-tr-2:before {
left: 62.5%;
}
.item-tr-3:before {
left: 87.5%;
}
.item-td {
border: 1px solid #555;
}
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>
<div ng-app="ProjectAssembly">
<div ng-controller="MyController">
<ul class="items">
<li ng-repeat-start="row in colors track by $index" class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-3 item-td" ng-repeat="item in row" ng-class="{active:isActive(item)}" ng-click="select(item,$parent.$index,$index); whattoshow=!whattoshow">
<span>
<img class="img-responsive" ng-src="images/colors/{{item.number}}.jpg">
{{item.number}}
</span>
</div>
</li>
<li ng-repeat-end ng-show="selected && selectedRowIndex==$index" class="row item-tr item-tr-{{selectedColumnIndex}}">
<div>
<h2>{{selected.bio}}</h2>
</div>
</li>
</ul>
</div>
</div>
Got a jsFiddle here
I'm trying to use angular-gridify in a similar way to this, but I am getting an $injector error as below. How should I be injecting the angular-gridify dependency, assuming that's what the problem is?
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
HTML:
<body ng-app="ExampleApp" ng-controller="ExampleCtrl" ng-click="generateTiles()">
<div class="gridify" ng-gridify="{wrapperSelector: '.wrapper', tileSelector: '.tile', perRow: 5, averageRatio: 1.5, gutter: 10, watch: 'tiles'}">
<div class="wrapper">
<div ng-repeat="tile in tiles" class="tile" data-ratio="{{tile.ratio}}" style="background-color: {{tile.color}}">
<img src="{{tile.src}}"></img>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="angular-gridify.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
JavaScript:
var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']).config(function() {});
testApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
controller: 'testCtrl'
})
});
testApp.controller('testCtrl', function($scope) {
$scope.tiles = [];
$scope.generateTiles = function() {
for (var i = 0; i < 50; i++) {
var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
$scope.tiles[i] = {
ratio: ratio,
color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
};
}
};
$scope.generateTiles();
});
In your js you registered testCtrl controller instead of ExampleCtrl controller
I too have sometimes difficulties to get an Angular app running with JSFiddle. I took your code, modified it a little and put it in Codepen:
http://codepen.io/cgav/pen/QjweXe?editors=111
JS:
var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']);
testApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
controller: 'testCtrl'
})
});
testApp.controller('testCtrl', function($scope) {
$scope.tiles = [];
$scope.generateTiles = function() {
for (var i = 0; i < 50; i++) {
var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
$scope.tiles[i] = {
ratio: ratio,
color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
};
}
};
$scope.generateTiles();
});
HTML:
<div ng-app="testApp" ng-controller="testCtrl">
<div class="gridify" ng-gridify="{wrapperSelector: '.wrapper', tileSelector: '.tile', perRow: 5, averageRatio: 1.5, gutter: 10, watch: 'tiles'}">
<div class="wrapper">
<div ng-repeat="tile in tiles" class="tile" data-ratio="{{tile.ratio}}" style="background-color: {{tile.color}}">
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 10px;
}
.tile {
width: 32px;
height: 32px;
}
.tile > img {
width: 100%;
height: 100%;
}
Is this what you are looking for?
EDIT:
Keep in mind to include the references to angular-gridify and angular-route.
Please view my JSFiddle
I have a fairly wonkey interaction that on a div mouseenter/mouseleave toggles a input checkbox on/off. If said checkbox is set true, it then sets a focus of an adjacent input text field.
I would like to isolate this interaction into a directive that will allow me to duplicate without conflict.
i've color coated the boxes for reference
<body ng-app="ngApp" ng-controller="MainCtrl">
<div class="row">
<div class="span2 box red" leave-edit="uncheckInputBox(false)" enter-edit="checkInputBox(true)">hover</div>
<span class='span8'>
<p>red</p>
<input type="checkbox" ng-model="isChecked">
<input xng-focus='isChecked' ng-model="editingInput">
{{isChecked}}
{{editingInput}}
</span>
</div>
<div class="row">
<div class="span2 box blue" leave-edit="uncheckInputBox(false)" enter-edit="checkInputBox(true)">hover</div>
<span class='span8'>
<p>blue</p>
<input type="checkbox" ng-model="isChecked">
<input xng-focus='isChecked' ng-model="editingInput">
{{isChecked}}
{{editingInput}}
</span>
</div>
</div>
js
var app = angular.module('ngApp', [])
app.controller('MainCtrl', ['$scope', function ($scope) {
'use strict';
$scope.isChecked = false;
$scope.$watch('isChecked', function(newV){
newV && $('#name').focus();
},true);
$scope.checkInputBox = function(val) {
$scope.isChecked = val;
};
$scope.uncheckInputBox = function(val) {
$scope.isChecked = val;
};
}]);
app.directive('xngFocus', function() {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.xngFocus,
function (newValue) {
newValue && element.focus();
},true);
}
};
});
app.directive('leaveEdit', function(){
return function(scope, element, attrs) {
element.bind('mouseleave', function() {
scope.$apply(attrs.leaveEdit);
});
};
});
app.directive('enterEdit', function(){
return function(scope, element, attrs) {
element.bind('mouseenter', function() {
scope.$apply(attrs.enterEdit);
});
};
});
css
.box {
height:50px;
cursor:pointer;
color: #fff;
text-align: center;
}
.red {
background: red;
}
.blue {
background: blue;
}
Strange interaction, but okay. You need to not use the same scope for each directive since you want them to be isolated.
I just did this by creating a scope for a directive that has the shared template.
app.directive('why', function() {
return {
scope: {},
link: function($scope, elt, attrs) {
//setup in here
}, ...
A few other things:
Don't include angular through external resources and in the framework section of fiddle. It runs angular over your dom twice and will behave strangely.
Also there are ng-mouseenter and ng-mouseleave directives in angular so you don't need to implement those.
The updated fiddle is here
Hope this helped!