AngularJS - How to pass variables between module and directive - javascript

I have a main page in main.html which displays fares.html as a part of the page. The existance of fares.html is as a directive (if I am not mistaken).
main.html :
<div class="alert alert-warning" role="alert">
Train option is empty, please select!
</div>
<div>
<label>TVG</label>
<fares
ng-model="train"
data-train-type="tvg"
current-ride-rate="{{train.tvg.rideRate}}">
</fares>
</div>
<div>
<label>Shinkansen</label>
<fares
ng-model="train"
data-train-type="shinkansen"
current-ride-rate="{{train.shinkansen.rideRate}}">
</fares>
</div>
fares.html :
<div>
<label for="fareFamily-{{trainType}}">Train rate</label>
<select
chosen
id="field-fareFamily-{{trainType}}"
name="fareFamily-{{trainType}}"
ng-model="fareFamily"
placeholder-text-single="'Select rate'"
ng-options="item for item in availableTrainRates"
>
<option value="">-- Select train rate</option>
</select>
</div>
-- Expected goal --
I would like to show the alert in main.html if fareFamily in fares.html is empty, which is something like including ng-if(?) in the alert :
main.html :
<div class="alert alert-warning" role="alert" ng-if="!fareFamily">
Train option is empty, please select!
</div>
-- Question --
Actually including ng-if is not a must, the idea is quite flexible but the main goal is to show the alert in main.html if fareFamily in fares.html is empty/unfilled.
Is there an approach to pass fareFamily in fares.html to main.html?
(I have main.js and fares.js files but did not include them here to not mess this question with code..)
Thanks in advance.
Edit:
Please feel free to correct this question's title if it's not accurate, thanks!

Related

Nested App inside controller in angularJS

how can I achieve that structure in AnglularJS ?
<body ng-app="mainBodyAppWrapper">
<div ng-controller = "mainBodyController">
<div ng-app="myApp">
<div ng-controller="controller3">
First Name : <input ng-model="myApp_fName3" type="text"/>
Last Name : <input ng-model="myApp_lName3" type="text"/>
Hello {{myApp_fName3}} {{myApp_lName3}} !!!
</div>
<hr/>
</div>
</div>
</body>
in that case I have an error https://docs.angularjs.org/error/ng/areq?p0=controller3&p1=not%20a%20function,%20got%20undefined
Any one know about that kind of error solution? Please help me out
You cannot use multiple ng-app in a page. If you really need to use multiple modules, consider bootstraping the second module. For more info, read How to define two angular apps / modules in one page

AngularJS "ng-repeat | filter:..." not working as I would expect (shows no data)

I'm trying to learn some AngularJS. I have a small page hosted locally which looks up information in MySQL. The fields are [user_ID, comment, user_Name].
Here is the webpage's code:
AngularJS Test
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<input ng-model="name_filter" placeholder="filter names">
<p>{{name_filter}}</p>
<div class="row" ng-repeat="data in profile_pictures | filter:{data.user_Name:name_filter}">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:125px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">{{data.user_Name}} says:</h4><hr>
<p style="padding:10px;">
{{data.comment}}
</p>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
Now the problem I am having is regarding the filter for "data in profile_pictures"
I'm trying to filter just by the user_Name field. When I type anything into the input box on the site, no data is displayed (everything disappears). I have tried hardcoding the filter to be a name I know is in the data, but that just shows no data when I load the page.
Any ideas?
Thanks for the help
You have invalid syntax in your filter. You need to provide the key name of the object as the filter object, do not use dot notation for the object key #filter:{data.user_Name:name_filter}"
i.e try
ng-repeat="data in profile_pictures | filter:{user_Name:name_filter}"

Editing and saving is not working

I have created an application in AngularJS with edit, save and cancel options, but the problem is that when I click the edit I am not getting the value for editing and saving.
The textfield and dropdowns are been provided through ng-transclude
Can anyone please tell me some solution for this
DEMO
HTML
<div ng-controller="LocationFormCtrl">
<h2>Editors</h2>
<span ng-repeat="location in location">
<div class="field">
<strong>State:</strong>
<div click-to-edit="location.state"><input ng-model="view.editableValue"/></div>
</div>
<div class="field">
<strong>City:</strong>
<div click-to-edit="location.city"><select ng-model="view.editableValue" ng-options="loc.city for loc in location"></select></div>
</div>
<div class="field">
<strong>Neighbourhood:</strong>
<div click-to-edit="location.neighbourhood"><input ng-model="view.editableValue"/></div>
</div>
<h2>Values</h2>
<p><strong>State:</strong> {{location.state}}</p>
<p><strong>City:</strong> {{location.city}}</p>
<p><strong>Neighbourhood:</strong> {{location.neighbourhood}}</p>
<hr>
</span>
</div>
Don't really know why, I was just playing around with the code, but seems working, at least with the text fields, using ng-if instead of ng-show/ng-hide: http://jsfiddle.net/T6rA9/1/
I'll update my answer if I find a reason...
Update: I think this is what you're looking for: http://jsfiddle.net/T6rA9/7/
The difference is that instead of saving the value on save, I am reverting the changes on cancel, which is easier due to angular two-way data-binding.
Because of that, I also removed the view.editableValue ng-model directive and used the fields as you would normally do.
Transclusion and isolated scopes does not work the way you may think. You can read more about it here http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
If you i.e. make this change you will already see a difference
<div click-to-edit="location.state"><input ng-model="location.state"/></div>
What about creating ngClick function which add input element inside your div with previous value?
<div class="newInput" ng-show="hidden">
<label> {{ inputValue }} </label>
</div>
<div class="newInput" ng-show="!hidden">
<input ng-model="inputValue" />
</div>
And main.js file:
app.controller('MyCtrl', function($scope) {
$scope.hidden = true;
$scope.inputValue = 'Edit me!';
$scope.addInput = function() {
$scope.hidden = !$scope.hidden;
}
});
Here you have Plunker

AngularJS : How do you access ng-model's scope value within a directive that is using transclusion?

I have an application controller that is responsible for adding users to another Model. There are two ways to add users in my application. We can add them by selecting the users themselves, or by selecting an entire group which will add all of the users of that group.
To make the UI a bit more friendly, I thought it would be a good idea to have tabs for adding users individually and through groups... that way I don't have to show both forms at the same time - the user can flip between the forms using tabs.
To implement tabs, I am using Angular Directives, since I use these tabs in other places in my application. Here is the html code to show you how the tabs are implemented:
<tabs class="tabsContainer">
<tab-pane title="Users" class="users">
<form name="usersForm" ng-submit="addUsers()">
<label>Select Users Here:</label>
<select name="selectedUsers" ng-model="selectedUsers"
multiple="true" ng-multiple="true"
ng-options="user.id as user.fullName for user in users">
</select>
<button type="submit">Add Users</button>
</form>
</tab-pane>
<tab-pane title="User Groups" class="userGroups">
<form name="userGroupForm" ng-submit="addUserGroups()">
<label>Select Groups Here:</label>
<select name="selectedUserGroups" ng-model="selectedUserGroups"
multiple="true" ng-multiple="true"
ng-options="userGroup.id as userGroup.name for userGroup in userGroups">
</select>
<button type="submit">Add User Groups</button>
</form>
</tab-pane>
</tabs>
In the controller for this HTML, I'd love to get access to the tab-pane's ng-model values for selectedUsers and selectedUserGroups. I would have thought that since they are defined as transcludes, that the scope would be the application's controller itself, but I think the scope value is actually in the tab-pane directive's scope. This means that in my main application controller, $scope.selectedUsers and $scope.selectedUserGroups is not defined.
If I temporarily remove the tabs and tab-pane directives, everything in the main controller works. So I think those directives are hidding ng-model when they are transcluded within a tab-pane.
How do I get access to it?

Create sub controller without route in Ember.js

I'm building a chat app with ember.js(I'm very new to it) that has the following specifics:
Every user have multiple threads each one with only two users involved
I need to display the thread and the messages in a "facebook" manner with the list of threads aside and the messages right of it
Every message have a read state that I need to work with
The app works with an url pattern like /:thread_id
Giving theese, I've already setted up an app
https://gist.github.com/Fed03/33da4a7c28c792af23cf (I've merged the various js file for sake of your readability) but the problem rises on the specific message state.
From what I understand about ember, evrything "needs" a route in order to proxy things, but if you look at the code and at the specifics a don't need a message route but I'd need a MessageController to manage the single message states.
Obviously I'm doing something very wrong with the architecture of this app, so if someone cuold give me some advices would be great!
Thank you in advance!
You'll want to use a {{render}} helper.
Instead of rendering each model in the threads template, pass the model to a {{render}} and have it handle displaying the message and it'll have it's own controller.
You'll need to create a seperate template for the msg, like this:
<script type="text/x-handlebars" data-template-name="message">
<div class="col-md-12">
<div class="well">
<div class="message-header">
<h5>{{user.fullname}}</h5>
</div>
{{body}}
{{isRead msg}}
</div>
</div>
</script>
And then change your thread template to this:
<script type="text/x-handlebars" data-template-name="thread">
{{#each msg in model.messages}}
{{render 'message' msg}}
{{/each}}
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
{{textarea value=message rows="3" class="form-control" data-thread=model}}
<div>
<button class="btn btn-primary pull-right" {{action 'send' model}}>
Submit
</button>
</div>
</div>
</div>
</div>
</script>
Then each msg will have it's own instance of MessageController and you can use it to handle it's state.

Categories