This is a small project just for learning purposes.
The objective is that when I click in the + button in front of the name of the game, the AngularJS material popup show up. Its working, but I want it to work for the different games. With a different HTML template correspondent to the game I click.
Here is my project.
https://github.com/hseleiro/myApp
index.html
<div ng-view>
</div>
assets/js/mainApp.js
var stuffApp = angular.module('myApp', ['ngAnimate','ngRoute','ngMaterial','ui.bootstrap.tpls','ui.bootstrap']);
stuffApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/',
{
templateUrl: 'pages/home.html',
controller: 'mainController',
})
.when('/games',
{
templateUrl: 'pages/games.html',
controller: 'mainController'
})
})
stuffApp.controller('mainController', function ($scope,$mdDialog){
$scope.query = {}
$scope.queryBy = '$'
$scope.games = [
{
"name" : "BloodBorne",
"consola" : "Playstation 4"
},
{
"name" : "Mass Efect 3",
"consola" : "Xbox 360"
},
{
"name" : "Pro Evolution Soccer 6",
"consola" : "Xbox 360"
}
];
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'pages/dialog1.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
function DialogController($scope, $mdDialog) {
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
pages/games.html
<div class="container">
<div class="row">
<div class="titulo">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<h1><i class="fa fa-gamepad fa-4x"></i></h1>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<div class="search_icon">
<h4><i class="fa fa-search fa-4x"></i></h4>
</div>
</div>
<div class="col-sm-11">
<div class="search_bar">
<div><input class="form-control" ng-model="query[queryBy]" /></div>
</div>
</div>
</div>
<hr>
<div>
<table class="table">
<tr>
<th>Nome</th>
<th>Consola</th>
</tr>
<tr ng-repeat="game in games | filter:query">
<td>{{game.name}}<md-button class="md-primary" ng-click="showAdvanced($event)">
<i class="fa fa-plus"></i>
</md-button></td>
<td>{{game.consola}}</td>
</tr>
</table>
</div>
</div>
pages/dialog1.tmpl.html
<md-dialog aria-label="">
<form>
<md-dialog-content class="sticky-container">
<md-subheader class="md-sticky-no-effect"></md-subheader>
<div>
<p>
Test
</p>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="assets/img/bloodborne.jpg">
<p>
Test
</p>
<p>
Test
</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="answer('useful')" class="md-primary">
Close
</md-button>
</div>
</form>
</md-dialog>
Could some one help me ? Thanks
Sounds like you need to parameterize the controller and template you pass to $mdDialog.
For example:
$scope.showAdvanced = function(ev, popupIdentifier) {
$mdDialog.show({
controller: popupIdentifier + 'Controller',
templateUrl: 'pages/' + popupIdentifier + '.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
and then simply call the function with whatever popup content you need:
$scope.showAdvanced($event, 'Game1');
Related
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
I need to pass in a value from the parent directive to the child directive, update it, then pass it back. When I pass in the parent function, and create a two-way binding, I get the error:
scope.updateItem is not a function
How can I accomplish this?
Parent directive template:
<div>
<custom-phrases item-to-update="item" update-item="updateItem"></custom-phrases>
</div>
Parent Directive JavaScript:
angular
.module('app')
.directive('itemlist',
function($rootScope, $state) {
return {
restrict: 'EA',
templateUrl: 'directives/cms/itemlist/itemlist.tpl.html',
scope: {
},
link: function(scope, element) {
// This will be called from child directive with updated item
scope.updateItem = function(item) {
console.log('Updating item from itemlist', item);
};
},
};
});
Child Directive JavaScript:
angular
.module('app')
.directive('customPhrases',
function($rootScope) {
return {
restrict: 'AE',
scope: {
itemToUpdate: '=',
updateItem: '=',
},
templateUrl: 'directives/cms/customPhrases/custom_phrases_directive.tpl.html',
link: function(scope, element) {
// do stuff to scope.itemToUpdate...
// then pass it back to parent directive
scope.updateItem(scope.itemToUpdate);
...
Note: I've also tried & to bind a function:
<div>
<custom-phrases item-to-update="item" update-item="updateItem(item)"></custom-phrases>
</div>
Then in child directive, changed this to:
scope: {
itemToUpdate: '=',
updateItem: '&',
},
If I console log scope.updateItem I get
TypeError: scope.updateItem is not a function
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nested Directives</title>
<link rel="stylesheet" href="./../../../lib/bootstrap/css/bootstrap.min.css">
<style>
body{
margin: 5px 10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div class="continer">
<my-tabs>
<!-- first pane starts-->
<my-pane title="Home">
<!-- home page contains jumbotron-->
<div class="jumbotron">
<h1>Home Page</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
</div>
<!-- home page jumbotron ends-->
</my-pane>
<!-- first pane ends-->
<!-- second pane starts-->
<my-pane title="Login">
<!-- login form start-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<!-- login form ends-->
</my-pane>
<!-- second pane ends-->
</my-tabs>
</div>
</body>
</html>
app.js
var app = angular.module('app', []);
app.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function MyTabsController($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
};
this.addPane = function(pane) {
if (panes.length === 0) {
$scope.select(pane);
}
panes.push(pane);
};
},
templateUrl: 'my-tabs.html'
};
})
.directive('myPane', function() {
return {
// ^^ prefix means that this directive searches for the controller on its parents
require: '^^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '#'
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
templateUrl: 'my-pane.html'
};
});
my-pane.html
<div class="tab-pane" ng-show="selected">
<h4>{{title}}</h4>
<hr/>
<div ng-transclude></div>
</div>
my-tabs.html
<div class="tabbable">
<ul class="nav nav-tabs nav-inverse">
<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
{{pane.title}}
</li>
</ul>
<div class="tab-content" ng-transclude></div>
</div>
My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?
I hat to enable it with $scope.$on('$ionicView.beforeEnter'...
states:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/temporada2016.html',
controller: 'temporada2016Ctrl',
params: { dataToTemp: false }
}
}
})
.state('menu.fotos', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/fotos.html',
controller: 'fotosCtrl'
}
}
})
.state('menu.configuraEs', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/configuraEs.html',
controller: 'configuraEsCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('detalhes', {
cache: false,
url: '/page4',
params: {
dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
});
controller:
.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on('$ionicView.beforeEnter', function(event, viewData){
viewData.enableBack = true;
});
$scope.$on('$routeChangeSuccess', function(event, current, previous){
});
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}
$scope.zoomMin = 1;
// image gallery
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/popover.html');
}
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
}])
fotos2.html
<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<!--<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
</div>
</div>-->
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
</div>
</div>
</ion-content>
</ion-view>
temporada2016.html
<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<div id="temporada2016-button-bar1" class="button-bar">
<button id="temporada2016-button2" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
<button id="temporada2016-button3" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
</div>
<form id="temporada2016-form8" class="list" ng-show="search_news">
<label class="item item-input" name="search_news">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
</label>
</form>
<div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">
<div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
<h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
</div>
</div>
<!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
<ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
</ion-list>-->
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.
I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.
Here is my home.html:
<ion-view title="" hide-nav-bar="true" hide-back-button="true">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/appicon.png">
<h2>Weather App</h2>
<p>What clothes do you need?</p>
</div>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="City" ng-model="inputs.city">
</label>
<input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
</div>
</div>
</ion-content>
</ion-view>
Here my app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html'
})
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeCtrl', function($scope) {
$scope.forcastDisabled = true
})
.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
$scope.getIconUrl = function(iconId) {
return 'http://openweathermap.org/img/w/' + iconId + '.png';
};
$scope.save = {};
$ionicLoading.show();
$scope.saveText = function (inputs) {
alert('Geht');
$location.path('result');
$scope.save = angular.copy(inputs);
$scope.inputs.city;
}
var vm = this;
// Vienna
var id = 2761369;
var city = 'Vienna';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '938c0cf5969f353bc718735f59aeffd6'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
$scope.weather = response.data;
}).
catch(function(response) {
vm.data = response.data;
$scope.weather = response.data;
});
$ionicLoading.hide();
});
And last my result.html:
<ion-view view-title="Current Weather">
<ion-content>
<div class="list card">
<div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
<div class="item item-thumbnail-left">
<img src="{{getIconUrl(weather.weather[0].icon)}}" />
<h1>{{weather.weather[0].main}}</h1>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Current Temperature: {{weather.main.temp}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-waterdrop"></i>
<h2>Humidity: {{weather.main.humidity}}%</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-shuffle"></i>
<h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
</div>
</div>
</ion-content>
</ion-view>
I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request?
Thanks in advance!
Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
Inject the $stateParams service and use the variable in the controller:
var city = $stateParams.city;
See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.
EDIT
Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz
Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.
My button is located in two partial templates exactly the same way. However it's not working in the home template.
I want to make the function deleteNote() work. When I am at a specific note's url the button works, but when I am at the home template it just won't. Does anybody have a clue why?
note.html
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
home.html exactly the same as you can see
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
notesCtrl.js
angular.module('theNotesApp')
.controller('notesCtrl', [
'$scope',
'notesFactory',
'note',
'$stateParams',
'$state', function($scope, notesService, note, $stateParams, $state) {
$scope.note = note;
$scope.title = note.title;
$scope.body = note.body;
$scope.updateNote = function() {
notesService.update($stateParams.id, {title: $scope.title, body: $scope.body});
notesService.getAll();
};
$scope.deleteNote = function(note) {
notesService.delete(note.id);
$state.go('home');
notesService.getAll();
};
}])
mainCtrl.js
.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){
$scope.notes = notesService.notesObjectInService;
notesService.getAll();
$scope.addNote = function(){
if ($scope.title === "" ) {
return;
}
notesService.create({
title: $scope.title,
body:$scope.body
});
$scope.title= '';
$scope.body= '';
};
}])
deleteNote is defined on scope of notesCtrl not on mainCtrl. You will need to create a method deleteNote on mainCtrl. Here is a demo.