We Keep Coding

Expandable div with buttons in Angularjs

That's my problem: http://jsfiddle.net/2f6qscrp/311/
shortly: I've got a div that can be expandable and it reveals a new div. This kind of event must be in all div. So, in each section of this div I can open it (like an accordion). The problem is that if i click one of the buttons on this div (they must be there) the div opens. I would avoid this thing if possible. Is it possible?
<div ng-app='home'>
<!-- App goes here -->
<md-content md-scroll-y flex layout="column" class="_md ng-scope layout-column flex" layout-padding ng-controller="MainCtrl as mainCtrl">
<div layout="column" md-scroll-y>
<div layout="row" ng-click="showDetailsFunction();" class="div-outline-none div-cursor-pointer">
<h3 flex class="div-card-panel-title">
Blablablabla
</h3>
<span flex></span>
<ul flex class="div-doc-act div-flex">
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn1');">
btn1
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn2');">
btn2
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn3');">
btn3
</md-button>
</li>
</ul>
</div>
<div data-ng-if="showDetails" class="animate-if">
<div>
wevniwernviurevnier
</div>
</div>
</div>
</md-content>
</div>
Angular part
angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);
angular.module('home').config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('grey');
});
angular.module('home').controller('MainCtrl', function ($scope, $window) {
$scope.showDetails = false;
$scope.showDetailsFunction = function() {
$scope.showDetails = !$scope.showDetails;
};
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert($scope.greeting + " " + greeting);
};
});

you can try using event.stopPropagation(); method to avoid the div opening on the button click.
$scope.(your div name) = function($event) {
$event.stopPropagation();
// Some code to find and display the next image
}

ms-card not working with data

I'm trying to put the data in the template but its not working, I can receive the data in HTML with vm.maquinas and maquina but i cant send it to TEMPLATE via ng-model.
Didn't find much info about ms-cards
Module
angular
.module('app.tabelas.entidades.recursos.painel', [])
.config(config);
/** #ngInject */
function config($stateProvider,$translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider)
{
$stateProvider.state('app.painel-recursos', {
url : '/entidades/recursos/painel',
views: {
'content#app': {
templateUrl: 'app/main/tabelas/entidades/recursosEntidades/views/painelRecursos/painelRecursos.html',
controller : 'maquinasController as vm'
}
},
resolve : {
MaquinasData: function (msApi)
{
return msApi.resolve('maquinas.lista#get');
}
},
bodyClass: 'painel-recurso'
});
// Translation
$translatePartialLoaderProvider.addPart('app/main/tabelas/entidades/recursosEntidades/views/painelRecursos');
// Api
msApiProvider.register('maquinas.lista', ['app/data/tables/maquinas.json']);
msNavigationServiceProvider.saveItem('tabelas.entidades.recursos', {
title: 'Recursos',
icon : 'icon-account',
weight: 2
});
msNavigationServiceProvider.saveItem('tabelas.entidades.recursos.painel', {
title: 'Painel de Maquinas',
icon : 'icon-account-multiple',
state: 'app.painel-recursos',
weight: 2
});
}
Controller
angular
.module('app.tabelas.entidades.recursos.painel')
.controller('maquinasController', maquinasController);
/** #ngInject */
function maquinasController(MaquinasData)
{
var vm = this;
// Data
vm.maquinas = angular.copy(MaquinasData.data);
// Methods
//////////
}
HTML
<div id="price-tables" class="page-layout simple fullwidth doc-page">
<div class="header md-accent-bg" layout="row" layout-align="space-between">
<div layout="column" layout-align="center start">
<div class="title"><label translate="MACHINE.TITLE_MACHINE">Title</label></div>
</div>
</div>
<div class="content">
<div class="price-tables" flex layout="row" layout-wrap>
<div class="price-table style-1 md-whiteframe-2dp" layout="column" ng-repeat="maquina in vm.maquinas">
<ms-card template="'app/main/modulos/planeamento/directives/cardMaquinas/templateMaquinas.html'" ng-model="vm.maquinas"></ms-card>
</div>
</div>
</div>
</div>
Template
<div class="package-type md-primary-bg" layout="column" layout-align="space-between center" style="background-color:{{maquina.color}};" >
<span class="md-display-1">{{card.name}}</span>
<span class="md-subhead">{{vm.card.name}}</span>
</div>
<div class="price" layout="row">
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.MARKING"> Marcação </div>
<div class="period">{{maquina.marcacao}}</div>
</div>
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.PARTS"> Peças </div>
<div class="period">{{maquina.pecas}}</div>
</div>
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.MATERIAL"> Material </div>
<div class="period">{{maquina.material}}</div>
</div>
</div>
<md-divider></md-divider>
<div layout="row">
<div class="terms" layout="column">
<div class="term"><span class="text-bold" translate="MACHINE.NEXT"> Proxima marcação: </span> </div>
<div class="term"><span class="text-bold" ></span> {{maquina.proximaMarcacaoEmpresa1}}</div>
<div class="term"><span class="text-bold"></span> {{maquina.proximaMarcacaoEmpresa2}} </div>
</div>
<div class="terms" payout="column">
<div class="term"><span class="text-bold" translate="MACHINE.DATE"> Data e hora:</span> </div>
<div class="term"><span class="text-bold"></span>{{maquina.dataUm}}</div>
<div class="term"><span class="text-bold"></span>{{maquina.dataDois}}</div>
</div>
</div>

Finally, i found out the problem.
It is required to use 'card' on the template. You cant change 'card' to another name(i think).
Consider the following object:
vm.cardModel = {
title : 'My Card',
description: 'My card description'
}
It will be available in the template file as:
card = {
title : 'My Card',
description: 'My card description'
}
Font: http://fuse-angular-material.withinpixels.com/components/custom-directives/ms-card

AngularJS Stopping CSS background slideshow showing all pages with ng-route

I am doing my AngularJS project with ng-route and everything works fine but the problem is I have a CSSC full background slide show which i implemented form this site http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ which work fine. When I click on other pages the content shows but the slideshow shows up as well moving/transitioning in the background. I want to stop this from happening. I want the slideshow to only show up on the index.html page only. Any solutions would be appreciated.
--- HTML code ---
<body ng-app="bigBlue"> <!--angular directive-->
<div main-page-navbar></div> <!--angular navbar directive-->
<div main-slide-show> </div> <!--angular side show directive-->
<div ng-view ></div>
<!-- Additional Java Script Files -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Angular Files -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular/angular-route/angular-route.js"></script>
<!-- Module/directives -->
<script src="js/app.js"></script>
<script src="js/directives/main-content.js"></script>
</body>
------- navbar directive code --------
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#/">Big Blue</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li class="active" role="presentation">Home </li>
<li role="presentation">Overview </li>
<li role="presentation">Map </li>
</ul>
</div>
</div>
</nav>
------ slide show directive code --------
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>endangered</h3></div></li>
<li><span>Image 02</span><div><h3>powerful</h3></div></li>
<li><span>Image 03</span><div><h3>caring</h3></div></li>
<li><span>Image 04</span><div><h3>loyal</h3></div></li>
<li><span>Image 05</span><div><h3>intelligent</h3></div></li>
<li><span>Image 06</span><div><h3>serene</h3></div></li>
</ul>
---- Angular Code ----
var app = angular.module("bigBlue", ["ngRoute"]); /* New module called big blue */
app.config(function($routeProvider) {
$routeProvider
.when('/overview', {
templateUrl : 'overview.html',
controller : 'whaleController'
})
.when('/map', {
templateUrl : 'map.html',
controller : 'MapController',
})
.otherwise({
redirectTo : '/'
});
});

You need to move your slideshow directive into the context of the index instead of the context of the entire application. Something like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<div main-slide-show></div>'
})
.when('/overview', {
templateUrl : 'overview.html',
controller : 'whaleController'
})
.when('/map', {
templateUrl : 'map.html',
controller : 'MapController',
})
.otherwise({
redirectTo : '/'
});
});
And pull the slideshow directive out of the markup.

angularjs ng-include pass value from controller

I'm trying to include subpages to my main page..
I'm using ng-include.. when I tried to put using this ng-include="'samplePage.php'" it works... but what I want is to assign the value of ng-include in the controller...
here's my hmtl code
<div id="navbar-override" class = "navbar navbar-inverse navbar-static-top" ng-controller="indexCtrl">
<div class = "container">
<div class = "navbar-header">
<a href = "index.html" class = "navbar-brand">
Sample App
</a>
<button id="navbar-btn-override" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li ng-repeat="link in Links" ng-class="{'active': selectedItem === link}">
{{ link }}
</li>
</ul>
</div>
</div>
</div>
<div class="container" ng-include="pages">
<!--subpages will append here-->
</div>
my controller.js
indexApp.controller('indexCtrl', ['$window','$scope', '$http', function($window, $scope, $http) {
$scope.pages = "./pages/customer.php";
}]);
if you ask me why I do this.. because I'm planing to use ng-include dynamically......
I'm still new to angularjs so bear with me...
thanks in advance..

This will work,
Your HTML :
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include src="template.url" onload='myFunction()'></div>
</div>
<!-- template1.php-->
<script type="text/ng-template" id="./pages/template1.php">
Content of template1.php
</script>
<!-- template2.php-->
<script type="text/ng-template" id="./pages/template2.php">
<p ng-class="color">Content of template2.php</p>
</script>
Controller :
function Ctrl($scope) {
$scope.templates = [{
name: 'template1.php',
url: './pages/template1.php'},
{
name: 'template2.php',
url: './pages/template2.php'}];
$scope.template = $scope.templates[0];
$scope.myFunction = function() {
$scope.color = 'red';
}
}
http://jsfiddle.net/MfHa6/1517/

how to give dynamic path to image on lightbox modal in angularjs along with ng-view?

I downloaded a template and applying Angularjs to that template.That template uses various Jquery plugins such as flexslider,Chocolat(Light box plugin)etc.
my code snippets are as above
index.html
<head>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.chocolat.js"></script>
<script type="text/javascript" type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" type="text/javascript" src="js/angular-route.min.js"></script>
</head>
<div class="banner ban1">
<div class="container">
<div class="top-menu">
<span class="menu"><img src="images/nav.png" alt=""/> </span>
<ul>
<li>home
</li>
<li><a ng-class="{active: isActive('/about')}" href="/curabitur/#/about">about</a>
</li>
<li><a ng-class="{active: isActive('/menu')}" href="/curabitur/#/menu">menus</a>
</li>
<li><a ng-class="{active: isActive('/gallery')}" href="/curabitur/#/gallery">gallery</a>
</li>
<li><a ng-class="{active: isActive('/events')}" href="/curabitur/#/events">events</a>
</li>
<li><a ng-class="{active: isActive('/contact')}" href="/curabitur/#/contact">contact</a>
</li>
</ul>
</div>
</div>
</div>
<body>
<div ng-view class="content"></div>
</body>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/app.js"></script>
I implemented routing using ng-view
in my gallery.html as template(/gallery)
<div class="gallery-info" style="border : 1px solid;">
<div class="col-md-4 galry-grids moments-bottom" ng-repeat=" gallery in galleryCollection.galleryItems" style="border : 1px solid green;">
<a light-box class="b-link-stripe b-animate-go" ng-src="{{gallery.galleryImageUrl}}"> {{gallery.galleryImageUrl}}
<img src="{{gallery.galleryImageUrl}}" class="img-responsive" alt="">
<div class="b-wrapper">
<span class="b-animate b-from-left b-delay03">
<img class="img-responsive" src="{{gallery.galleryBigImageUrl}}" alt=""/>
</span>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
and app.js as
angular.module("curabitur", ['ngRoute', 'curabitur.controller'])
.config(function($routeProvider) {
$routeProvider
.when("/gallery", {
templateUrl: './partials/gallery.html',
controller: 'galleryController'
})
.when("/menu", {
templateUrl: './partials/menu.html',
controller: 'menuController'
})....other when blocks
});
the controller for gallery is in controller.js as
angular.module("curabitur.controller", ['ui.bootstrap', 'curabitur.services'])
.directive('lightBox', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log("lightbox directive");
console.log("lightbox function");
$(element).Chocolat();
$('.moments-bottom a').Chocolat();
$(function() {
$('.moments-bottom a').Chocolat();
//alert($('.moments-bottom '));
});
}
};
})
.controller("galleryController", function($scope) {
$scope.galleryCollection = {
"galleryId": "",
"galleryHeading": "EVENTS",
"galleryItems": [{
"galleryImageId": "",
"galleryImageUrl": "images/g1.jpg",
"galleryBigImageUrl": "images/e.png",
"galleryimageLink": ""
}, {
"galleryImageId": "",
"galleryImageUrl": "images/g2.jpg",
"galleryBigImageUrl": "images/e.png",
"galleryimageLink": ""
}, ]
};
My question is that How should I assign dynamic value to in
gallery.html where light-box directive is called?
After clicking image in div image path is not getting to
I also tried ng-href but it doesn't work.
I referred following link.
anchor tags and dynamic views in angular.js

You can use ng-src directive like this ng-src="{{gallery.galleryBigImageUrl}}"
It will tell anguar to load image after binding

Inside light-box directive in controller.js, I accessed the element and set the href property to that element as,
.directive('lightBox', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log("lightbox directive");
console.log("lightbox function");
/* set image url attribute */
element.attr("href",scope.gallery.galleryImageUrl)
/* call to plugin */
$(element).Chocolat();
$('.moments-bottom a').Chocolat();
$(function() {
$('.moments-bottom a').Chocolat();
//alert($('.moments-bottom '));
});
}
};
});
and put # to in gallery.html as
<a light-box class="b-link-stripe b-animate-go" href="#">
<img src="{{gallery.galleryImageUrl}}" class="img-responsive" alt="">
<div class="b-wrapper">
<span class="b-animate b-from-left b-delay03">
<img class="img-responsive" src="{{gallery.galleryBigImageUrl}}" alt=""/>
</span>
</div>
</a>