Skip to content

Commit 4e99a29

Browse files
UrigoUrigo
committed
Merge pull request Urigo#457 from Urigo/feature/scope-inside-meteor-include
(docs): Show how to use scope inside meteor include, fixes Urigo#333
2 parents 253d5e7 + f568c26 commit 4e99a29

File tree

14 files changed

+223
-6
lines changed

14 files changed

+223
-6
lines changed

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

Lines changed: 88 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,100 @@
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+
61+
62+
#### Example using scope data
63+
64+
65+
__`blaze-angular.html`:__
66+
67+
<head></head>
68+
<body ng-app="blaze-angular-scope"
69+
ng-controller="AngularCtrl"
70+
ng-include="'blaze-angular-scope.ng.html'">
71+
</body>
72+
73+
<template name="partiesBlazeTemplate">
74+
<div>
75+
Angular parties inside Blaze:
76+
{{dstache}}#each parties}}
77+
{{dstache}}> party}}
78+
{{dstache}}/each}}
79+
</div>
80+
{{lt}}/template>
81+
82+
<template name="party">
83+
<li>Name: {{dstache}}name}} , Description: {{dstache}}description}}</li>
84+
{{lt}}/template>
85+
86+
__`blaze-angular-scope.ng.html`:__
87+
88+
<h1>Inside Angular</h1>
89+
90+
<form>
91+
<label>Name</label>
92+
<input ng-model="newParty.name">
93+
<label>Description</label>
94+
<input ng-model="newParty.description">
95+
<button ng-click="parties.push(newParty); newParty='';">Add</button>
96+
</form>
97+
98+
<meteor-include src="partiesBlazeTemplate"></meteor-include>
99+
100+
__`blaze-angular.js`:__
101+
102+
if (Meteor.isClient) {
103+
104+
angular.module('blaze-angular-scope',['angular-meteor']);
105+
106+
angular.module("blaze-angular-scope").controller("AngularCtrl", ['$scope',
107+
function($scope){
108+
109+
$scope.parties = [
110+
{'name': 'Dubstep-Free Zone',
111+
'description': 'Can we please just for an evening not listen to dubstep.'},
112+
{'name': 'All dubstep all the time',
113+
'description': 'Get it on!'}
114+
];
115+
116+
}]);
117+
118+
Template.partiesBlazeTemplate.helpers({
119+
parties: function() {
120+
return Template.currentData().getReactively('parties', true);
121+
}
122+
});
123+
}
124+
125+
126+
127+
### Passing arguments to meteor-include
51128

129+
To pass parameters to a `meteor-include` directive:
52130

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:
131+
1. Create a new Blaze template that includes the template you want to include
132+
2. Add the parameters to the new template
133+
3. Include that new template with meteor-include
55134

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

140+
<meteor-include src="quickFormWithParameters"></meteor-include>
141+
```
58142
{{/markdown}}
59143
</do-nothing>
60144

‎.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

‎examples/meteor-include/.meteor/.finished-upgraders

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

‎examples/meteor-include/.meteor/.gitignore

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

‎examples/meteor-include/.meteor/packages

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

‎examples/meteor-include/.meteor/platforms

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
server
2+
browser

‎examples/meteor-include/.meteor/release

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[email protected]

‎examples/meteor-include/.meteor/versions

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
angular:[email protected]
2+
[email protected]
3+
[email protected]
4+
[email protected]
5+
[email protected]
6+
[email protected]
7+
[email protected]
8+
[email protected]
9+
[email protected]
10+
[email protected]
11+
dburles:[email protected]
12+
[email protected]
13+
[email protected]
14+
[email protected]
15+
[email protected]
16+
[email protected]
17+
[email protected]
18+
[email protected]
19+
[email protected]
20+
[email protected]
21+
[email protected]
22+
[email protected]_2
23+
[email protected]
24+
lai:[email protected]
25+
[email protected]
26+
[email protected]
27+
[email protected]
28+
[email protected]
29+
[email protected]
30+
[email protected]
31+
[email protected]
32+
[email protected]
33+
[email protected]
34+
[email protected]
35+
[email protected]
36+
[email protected]
37+
[email protected]
38+
[email protected]
39+
[email protected]
40+
[email protected]
41+
[email protected]
42+
[email protected]
43+
[email protected]
44+
[email protected]
45+
[email protected]
46+
[email protected]
47+
[email protected]
48+
[email protected]
49+
urigo:[email protected]
50+
[email protected]
51+
[email protected]
52+
[email protected]

‎examples/meteor-include/blaze-angular-scope.ng.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<h1>Inside Angular</h1>
2+
3+
<form>
4+
<label>Name</label>
5+
<input ng-model="newParty.name">
6+
<label>Description</label>
7+
<input ng-model="newParty.description">
8+
<button ng-click="parties.push(newParty); newParty='';">Add</button>
9+
</form>
10+
11+
<meteor-include src="partiesBlazeTemplate"></meteor-include>

0 commit comments

Comments
 (0)