Skip to content

Instantly share code, notes, and snippets.

@MacKentoch

MacKentoch/AngularJS : Pass Data Between Controller.html

Last active August 29, 2015 14:24
Show Gist options
  • Save MacKentoch/6c6312487afe57ab2a21 to your computer and use it in GitHub Desktop.
Save MacKentoch/6c6312487afe57ab2a21 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS : share data between controller
Raw
AngularJS : Pass Data Between Controller.html
<!DOCTYPE html>
<html><head>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
<title>AngularJS Services</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js" type="text/javascript"></script>
<style type="text/css">
.container-custom{
margin-right: 2%;
margin-left: 2%;
padding-left: 15px;
padding-right: 15px;
}
code{
line-height: 1.1;
}
</style>
</head>
<body>
<div class="container-custom ng-scope" ng-app="app">
<h1>Service to share data between controllers</h1>
<hr>
<section id="titles">
<div class="row">
<div class="col-md-4">
<h2>using service</h2>
</div>
<div class="col-md-4">
<h2 text-success="">using app.value</h2>
</div>
<div class="col-md-4">
<h2 text-success="">using app.value / update</h2>
</div>
</div>
</section>
<section class="ng-scope" id="left">
<div class="row">
<!-- from service / add-->
<div class="col-md-4" ng-controller="ListCtrl as list">
<div class="panel panel-warning">
<div class="panel-heading">
<h3>ListCtrl : </h3>
<p><small>Work too if controller model is bound to<code>messages.list</code></p>
<p>add new item to list won't change refence (controller will see changes)</small></p>
<code>
<p>self.messages = messages.list;</p>
</code>
</div>
<div class="panel-body">
<div>
<div>
<!-- ngRepeat: message in list.messages -->
<p class="ng-binding ng-scope" ng-repeat="message in list.messages">{{message}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- from app.value / add -->
<div class="col-md-4" ng-controller="ListCtrl2 as list">
<div class="panel panel-default">
<div class="panel-heading">
<h3>ListCtrl2 : </h3>
<p><small>Work too if controller model is bound to<code>messages2.list</code></p>
<p>add new item to list won't change refence (controller will see changes)</small></p>
<code>
<p>self.messages2 = messages2.list;</p>
</code>
</div>
<div class="panel-body">
<div>
<div>
<!-- ngRepeat: message2 in list.messages2 -->
<p class="ng-binding ng-scope" ng-repeat="message2 in list.messages2">{{message2}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- from app.value / update -->
<div class="col-md-4" ng-controller="ListCtrl3 as list">
<div class="panel panel-success">
<div class="panel-heading">
<h3>ListCtrl3 : </h3>
<p><small>Won't work if controller model is bound to <code>messages3.list</code></p>
<p>since update will change reference (controller will not see changes)</small></p>
<code>
<p><s>//self.messages3 = messages3.list;</s></p>
<h4>self.messages3 = messages3;</h4>
</code>
</div>
<div class="panel-body">
<div>
<div>
<!-- ngRepeat: message3 in list.messages3 -->
<p class="ng-binding ng-scope" ng-repeat="message3 in list.messages3.list">{{message3}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ng-scope" id="right">
<div class="row">
<!-- from service -->
<div class="col-md-4" ng-controller="PostCtrl as post">
<div class="panel panel-warning">
<div class="panel-heading">
<h3>PostCtrl : </h3>
<p>"add Message" will call add from messages : </p>
<code>
<p> app.factory('messages', function(){ </p>
<p>&nbsp;&nbsp; &nbsp; var messages = {}; </p>
<p>&nbsp;&nbsp; &nbsp; messages.list = []; </p>
<p>&nbsp;&nbsp; &nbsp; messages.add = function(message){ </p>
<p>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; messages.list.push({id: messages.list.length, text: message});</p>
<p>&nbsp;&nbsp; &nbsp;&nbsp; }; </p>
<p>&nbsp;&nbsp; &nbsp; return messages; </p>
<p>&nbsp;&nbsp; &nbsp; }); </p>
</code>
</div>
<div class="panel-body">
<div>
<div>
<form class="ng-pristine ng-valid" ng-submit="post.addMessage(post.newMessage)">
<input class="ng-pristine ng-untouched ng-valid" type="text" ng-model="post.newMessage">
<button class="btn btn-default" type="submit">Add Message</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- from app.value -->
<div class="col-md-4" ng-controller="PostCtrl2 as post">
<div class="panel panel-default">
<div class="panel-heading">
<h3>PostCtrl2 : </h3>
<p>"add Message" will will call add from messages2 : </p>
<code>
<p> app.value('messages2', { </p>
<p> &nbsp;&nbsp; &nbsp; list: [],</p>
<p> &nbsp;&nbsp;&nbsp; add: function(message){ </p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.list.push({id: this.list.length, text: message}); </p>
<p> &nbsp;&nbsp;&nbsp;&nbsp; }</p>
<p> &nbsp;&nbsp;&nbsp; }</p>
<p> );</p>
</code>
</div>
<div class="panel-body">
<div>
<div>
<form class="ng-pristine ng-valid" ng-submit="post.addMessage2(post.newMessage2)">
<input class="ng-pristine ng-untouched ng-valid" type="text" ng-model="post.newMessage2">
<button class="btn btn-default" type="submit">Add Message2</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- from app.value / update model -->
<div class="col-md-4" ng-controller="PostCtrl3 as post">
<div class="panel panel-success">
<div class="panel-heading">
<h3>PostCtrl3 : </h3>
<p><small>"update Message3" will call update from messages3 :</small></p>
<code>
<p> app.value('messages3', { </p>
<p> &nbsp;&nbsp; &nbsp; list: [],</p>
<p> &nbsp;&nbsp;&nbsp; update: function(message){ </p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.list = [].concat({id: this.list.length, text: message}); </p>
<p> &nbsp;&nbsp;&nbsp;&nbsp; }</p>
<p> &nbsp;&nbsp;&nbsp; }</p>
<p> );</p>
</code>
</div>
<div class="panel-body">
<div>
<div>
<form class="ng-pristine ng-valid" ng-submit="post.updateMessage3(post.newMessage3)">
<input class="ng-pristine ng-untouched ng-valid" type="text" ng-model="post.newMessage3">
<button class="btn btn-default" type="submit">update Message3</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
/*===============================================
VALUE FOR COUPLE CONTROLLERS 3
=================================================*/
app.value('messages3', {
list: [],
update: function(message){
this.list = [].concat({id: this.list.length, text: message});
}
}
);
/*===============================================
VALUE FOR COUPLE CONTROLLERS 2
=================================================*/
app.value('messages2', {
list: [],
add: function(message){
this.list.push({id: this.list.length, text: message});
}
}
);
/*===============================================
SERVICE FOR COUPLE CONTROLLERS 1
=================================================*/
app.factory('messages', function(){
var messages = {};
messages.list = [];
messages.add = function(message){
messages.list.push({id: messages.list.length, text: message});
};
return messages;
});
/*============================
COUPLE CONTROLLERS 1
==============================*/
app.controller('ListCtrl', function (messages){
var self = this;
self.messages = messages.list;
});
app.controller('PostCtrl', function (messages){
var self = this;
self.newMessage = 'Hello World!';
self.addMessage = function(message){
messages.add(message);
self.newMessage = '';
};
});
/*============================
COUPLE CONTROLLERS 2
==============================*/
app.controller('ListCtrl2', function (messages2){
var self = this;
self.messages2 = messages2.list;
});
app.controller('PostCtrl2', function (messages2){
var self = this;
self.newMessage2 = 'Hello World again!';
self.addMessage2 = function(message){
messages2.add(message);
self.newMessage2 = '';
};
});
/*============================
COUPLE CONTROLLERS 3
==============================*/
app.controller('ListCtrl3', function (messages3){
var self = this;
//self.messages3 = messages3.list;
self.messages3 = messages3;
});
app.controller('PostCtrl3', function (messages3){
var self = this;
self.newMessage3 = 'Hello World again again !';
self.updateMessage3 = function(message){
messages3.update(message);
self.newMessage3 = '';
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment