Skip to content

Commit 92230d4

Browse files
committed
(meteor-include): Add $scope inside Blaze templates as Template.currentData , thanks @stubailo Urigo#333
1 parent ef4ffbe commit 92230d4

File tree

17 files changed

+259
-10
lines changed

17 files changed

+259
-10
lines changed

.docs/angular-meteor/client/views/api/api.meteor-include.html

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212

1313
A directive to include Meteor native Blaze [templates](http://docs.meteor.com/#/full/templates_api)
1414

15+
Holds the current Angular [scope](https://docs.angularjs.org/guide/scope) as [Template.currentData](http://docs.meteor.com/#/full/template_currentdata).
16+
1517
----
1618

1719
## Usage
@@ -43,18 +45,108 @@
4345

4446
----
4547

46-
## Example
48+
### Simple Example
4749

4850

4951
<meteor-include src="loginButtons"></meteor-include>
5052

53+
----
54+
55+
### Using Angular Scope inside Meteor template
56+
57+
58+
The `meteor-include` directive holds the Angular scope of the directive as the
59+
as [Template.currentData](http://docs.meteor.com/#/full/template_currentdata) of the Meteor template,
60+
names it `$scope` and update it reactively.
61+
62+
63+
#### Example using scope data
64+
65+
66+
__`blaze-angular.html`:__
67+
68+
<head></head>
69+
<body ng-app="blaze-angular-scope"
70+
ng-controller="AngularCtrl"
71+
ng-include="'blaze-angular-scope.ng.html'">
72+
</body>
73+
74+
<template name="partiesBlazeTemplate">
75+
<div>
76+
Angular parties inside Blaze:
77+
{{dstache}}#each parties}}
78+
{{dstache}}> party}}
79+
{{dstache}}/each}}
80+
</div>
81+
{{lt}}/template>
82+
83+
<template name="party">
84+
<li>Name: {{dstache}}name}} , Description: {{dstache}}description}}</li>
85+
{{lt}}/template>
86+
87+
__`blaze-angular-scope.ng.html`:__
88+
89+
<h1>Inside Angular</h1>
90+
91+
<form>
92+
<label>Name</label>
93+
<input ng-model="newParty.name">
94+
<label>Description</label>
95+
<input ng-model="newParty.description">
96+
<button ng-click="parties.push(newParty); newParty='';">Add</button>
97+
</form>
98+
99+
<meteor-include src="partiesBlazeTemplate"></meteor-include>
100+
101+
__`blaze-angular.js`:__
102+
103+
if (Meteor.isClient) {
104+
105+
angular.module('blaze-angular-scope',['angular-meteor']);
106+
107+
angular.module("blaze-angular-scope").controller("AngularCtrl", ['$scope',
108+
function($scope){
109+
110+
$scope.parties = [
111+
{'name': 'Dubstep-Free Zone',
112+
'description': 'Can we please just for an evening not listen to dubstep.'},
113+
{'name': 'All dubstep all the time',
114+
'description': 'Get it on!'}
115+
];
116+
117+
}]);
118+
119+
Template.partiesBlazeTemplate.onCreated(function () {
120+
// getAngularScope is a helper function supplied by angular-meteor
121+
getAngularScope(this);
122+
});
123+
124+
Template.partiesBlazeTemplate.helpers({
125+
parties: function() {
126+
// Make sure scope is already defined as Blaze loads before Angular
127+
if (Template.instance().$scope)
128+
return Template.instance().$scope.parties
129+
}
130+
});
131+
}
132+
133+
134+
135+
### Passing arguments to meteor-include
51136

137+
To pass parameters to a `meteor-include` directive:
52138

53-
## Passing arguments to meteor-include
54-
To pass parameters to a meteor-include directive, create a Blaze template that includes the template you want to include with parameters and include that template with meteor-include:
139+
1. Create a new Blaze template that includes the template you want to include
140+
2. Add the parameters to the new template
141+
3. Include that new template with meteor-include
55142

56-
[Example](https://github.com/Urigo/angular-meteor/blob/master/README.md#passing-arguments-to-meteor-include)
143+
```
144+
<template name="quickFormWithParameters">
145+
{{dstache}}> quickForm collection="Books" id="insertBookForm" type="insert"}}
146+
{{lt}}/template>
57147

148+
<meteor-include src="quickFormWithParameters"></meteor-include>
149+
```
58150
{{/markdown}}
59151
</do-nothing>
60152

.docs/angular-meteor/client/views/steps/tutorial.step_08.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h1>Step 8 - User accounts, authentication and permissions</h1>
5858

5959
Now let's add the accounts-ui template ( <code ng-non-bindable>&#123;&#123;> loginButtons &#125;&#125;</code> ) into our app, into index.html.
6060

61-
To add Meteor's templates into AngularJS templates, angular-meteor provides us with the meteor-include directive.
61+
To add Meteor's templates into AngularJS templates, angular-meteor provides us with the [meteor-include](/api/meteor-include) directive.
6262

6363
So instead of adding <code ng-non-bindable>&#123;&#123;> loginButtons &#125;&#125;</code> like in Meteor we will add:
6464

.versions

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ [email protected]
1919
2020
2121
22-
local-test:urigo:[email protected].0
22+
local-test:urigo:[email protected].1
2323
2424
2525
@@ -45,7 +45,7 @@ [email protected]
4545
4646
4747
48-
48+
4949
5050
5151

bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-meteor",
33
"main": "angular-meteor.js",
4-
"version": "0.9.0",
4+
"version": "0.9.1",
55
"homepage": "https://github.com/Urigo/angular-meteor",
66
"authors": [
77
"Uri Goldshtein <[email protected]>"
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# This file contains information which helps Meteor properly upgrade your
2+
# app when you run 'meteor update'. You should check it into version control
3+
# with your project.
4+
5+
notices-for-0.9.0
6+
notices-for-0.9.1
7+
0.9.4-platform-file
8+
notices-for-facebook-graph-api-2
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
local

examples/meteor-include/.meteor/.id

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# This file contains a token that is unique to your project.
2+
# Check it into your repository along with the rest of this directory.
3+
# It can be used for purposes such as:
4+
# - ensuring you don't accidentally deploy one app on top of another
5+
# - providing package authors with aggregated statistics
6+
7+
12rm9kj15yvj8m1tesoma
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Meteor packages used by this project, one per line.
2+
# Check this file (and the other files in this directory) into your repository.
3+
#
4+
# 'meteor add' and 'meteor remove' will edit this file for you,
5+
# but you can also edit it by hand.
6+
7+
meteor-platform
8+
autopublish
9+
insecure
10+
urigo:angular
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
server
2+
browser
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

0 commit comments

Comments
 (0)