Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
Urigo committed Oct 25, 2014
2 parents 9c9a818 + 6518583 commit 32fac10
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 21 deletions.
40 changes: 20 additions & 20 deletions docs/angular-meteor/client/views/steps/tutorial.step_12.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,47 +23,47 @@

First, let's learn about [ng-show](https://docs.angularjs.org/api/ng/directive/ngShow) and [ng-hide](https://docs.angularjs.org/api/ng/directive/ngHide).

So one thing we want to hide and show is the form for creating a new party. if the user is not logged in, he can't create a party, so why displaying the form for him?
If the user is not logged in we want to display a message saying he needs to log in to create a new party.
So one thing we want to hide and show is the form for creating a new party. If a user is not logged in, they can't create a party, so why displaying the form for them?
If the user is not logged in, we want to display a message saying they need to log in to create a new party.

In parties-list.html add a ng-show directive to the form like that:

<form ng-show="user">

'user' is the scope variable that we used earlier that is binded to the current logged in user with the help of the $user service.
If it is undefined is means that there is no logged in user so only if it exists the form will be shown.
Note that 'user' is the scope variable that we used earlier that is bound to the current logged-in user with the help of the `$user` service.
If it is undefined, this means that there is no logged-in user. So only if 'user' exists will the form will be shown.

Then right after the form add this HTML:
Then right after the form, add this HTML:

<div ng-hide="user">
Log in to create a party!
</div>

That is exactly the opposite - if user exists, hide that div. note that this statement is equivalent to ng-show="!user".
That is exactly the opposite - if 'user' exists, hide that div. Note that this statement is equivalent to ng-show="!user".

Let's add the same to the RSVP buttons:
Now add the same to the RSVP buttons:

<div ng-show="user">
<input type="button" value="I'm going!" ng-click="rsvp(party._id, 'yes')">
<input type="button" value="Maybe" ng-click="rsvp(party._id, 'maybe')">
<input type="button" value="No" ng-click="rsvp(party._id, 'no')">
</div>


Next thing we want to hide is the delete party option in case the logged in user is not the party's owner.
'
Next thing we want to hide is the 'delete party' option, in case the logged-in user is not the party's owner.
Lets add ng-show to the delete button like that:

<button ng-click="remove(party)" ng-show="user && user._id == party.owner">X</button>

In here you can see that ng-show can get a statement, in our case - the user exists (logged in) and is also the party's owner.
In here you can see that `ng-show` can get a statement, in our case - the user exists (logged in) and is also the party's owner.


# ng-if

[ng-if](https://docs.angularjs.org/api/ng/directive/ngIf) acts almost the same as ng-show but the difference between them
is that ng-show hides the element by changing the display css property and ng-if simply removes it from the DOM completely.
[ng-if](https://docs.angularjs.org/api/ng/directive/ngIf) acts almost the same as `ng-sho`w but the difference between them
is that `ng-show` hides the element by changing the display css property and `ng-if` simply removes it from the DOM completely.

So lets use ng-if to hide the outstanding invitations from a party is the party is public (everyone is invited!):
So let's use `ng-if` to hide the outstanding invitations from a party, if the party is public (everyone is invited!):

<ul ng-if="!party.public">
Users who not responded:
Expand All @@ -80,9 +80,9 @@

Now lets hide the 'Users to invite' inside party-details.html is case the user is not logged in or can't invite to the party:

To do that we will create a scope function that returns a boolean and associate it hide ng-show:
To do that we will create a scope function that returns a boolean and associate it with `ng-show`:

Create a new function inside partyDetailsCtrl inside the partyDetails.js file named 'canInvite':
Create a new function inside partyDetailsCtrl inside the partyDetails.js file named `canInvite`:

$scope.canInvite = function (){
if (!$scope.party)
Expand All @@ -92,7 +92,7 @@
$scope.party.owner === Meteor.userId();
};

and add the ng-show to the 'ul' in party-details.html:
and add the `ng-show` to the `ul` in party-details.html:

<ul ng-show="canInvite()">
Users to invite:
Expand All @@ -102,7 +102,7 @@
</li>
</ul>

Now lets add a div that tells to the user that everyone is already invite if he invited all the users already:
Now lets add a `div` that tells the user that everyone is already invited, if that is the case:

<ul ng-show="canInvite()">
Users to invite:
Expand All @@ -115,19 +115,19 @@
</li>
</ul>

we are taking the result of the uninvited users and check for it's length.
Here, we are taking the result of the uninvited users and checking for its length.

# ng-disabled

Now lets disable the partyDetails input fields in case the user doesn't have permission to change them (now the server is stopping the user but there is no visual feedback besides that the server overrides the local edit immediately after):
Now lets disable the partyDetails input fields in case the user doesn't have permission to change them (currently, the server is stopping the user, but there is no visual feedback aside from the server overriding the local edit immediately after):

<input ng-model="party.name" ng-disabled="party.owner != $root.currentUser._id">
<input ng-model="party.description" ng-disabled="party.owner != $root.currentUser._id">
<label>Is public</label>
<input type="checkbox" ng-model="party.public" ng-disabled="party.owner != $root.currentUser._id">


# Summery
# Summary

So now our example looks much better after we hide things based on the current situation.

Expand Down
3 changes: 2 additions & 1 deletion modules/angular-meteor-template.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,11 @@ angularMeteorTemplate.directive('meteorInclude', [
if (name && Template[name]) {
var template = Template[name];
Blaze.renderWithData(template, scope, element.get(0));
$compile(element.contents())(scope);
} else {
console.error("meteorTemplate: There is no template with the name '" + name + "'");
}
}
};
}
]);
]);

0 comments on commit 32fac10

Please sign in to comment.