ng-model binds data in one view but not the other - javascript

I'm using ui-router to build multiple views, I have a typical header, content, footer layout.
I used to have a search box in the content template, it simply uses ng-model to capture user input:
<label class="col-xs-12 col-sm-6">
Search: <input ng-model="searchPattern">
</label>
Then I use angular filter to search in my data in the same content view.
However, if I move these lines to the "header" view, it no longer works, it seems data bound by ng-model doesn't travel through views? I have specified the same controller for both views, i.e.:
.state('app', {
url: '/',
views: {
'header': {
templateUrl: 'header.html',
controller: 'MyController'
},
'content': {
templateUrl: 'content.html',
controller: 'MyController'
},
'footer': {
templateUrl: 'footer.html',
}
}
})
and I can print out {{searchPattern}} in the header view itself, but not in content view.
So how do I capture data in view and use it to filter in another view?

You should not reuse controllers, it's ideal to have a controller be used only with a specific template.
What you can do is create a service, and put your data in there, then inject them in the two controllers where you want your data to be shared

Related

How to update the selected item after being re-directed into another page

Im creating an app where I have used ionic item-divider. When I click on the list header it will re-direct to the new view where the user can update and delete the currently selected item.The problem I face is in the updation because Im unable to push the information from the first page to the second page i.e I want to push both the selected item and its sub-item so that both are edited and saved. Im using key in my controller to know what is being selected, after which I'm struggling to push the option selected and its related information to the next page for update and save it. I have attached a plunker how my first page looks.
plnkr link
Main View:
<ion-list>
<ion-item ng-model="carBrand" ng-repeat="name in carSelect">
<button ng-click="selectItem(name)">{{name.name}}</button>
<div class="item" ng-repeat="type in name.types">{{type}}</div>
</ion-item>
</ion-list>
Things you are doing wrong
you cant use
$state.go('second.html',{key});
It needs proper routing,You cant use explicit .html file to go to. You should add config part in your js like this
carService.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'templates/first.html',
controller: 'carBrand'
})
.state('second', {
url: '/second',
templateUrl: 'templates/second.html',
controller: 'secondCTRL',
params: {
object: null
}
});
$urlRouterProvider.otherwise('/first');
})
after that you can only goto secong page . And for passing parameters
you should pass it through like this
$state.go('second', {object:key});
but you are using $rootScope so you dont need to pass parameters , You can use that $rootScope.selectItem in your secondController.
Hope This helps You .. Thanks

AngularJS Changing the particular view by $stateProvider from ui.router

I'm writing full stack e-commerce store with AngularJS and express.js, and I'm searching help of somebody more experienced with $stateProvider and ngAnimate.
Currently I'm having a trouble with $stateProvider and two columns layout.
I've got root view abstract state which is named 'pages'. This state includes base app template with view named 'main'. On state change event the 'main' view is transitioning to the next one with CSS transition by the ngAnimate module and it's all OK with regular one column page.
The trouble I'm experiencing is within the two-column layout included in the 'main' view. With the partial template of two columns view, ngAnimate was transitioning whole content, so column was unnecessary transitioned with the products view.
What I've done, I've created a sub-state and divided its template into two views. Right now the 'sidebar' view is including partial with categories of products, and the second one, the 'content' is a products list.
The products list view contents is depending on sub-state of products state, based on abstract state descibed above.
Right now the products list is changing correctly with transition attached to the 'content' view but the column 'sidebar' is unnecessary reloaded.
Is it possible to change state with changing only the content of particular view or are you having other ideas?
Live demo: http://rtbm.space:3000/#/products
Code: https://github.com/rtbm/angular-express-store/tree/master/public/assets/src/web/modules
The modules described above are pages and products.
You could use a more hierarchical route-structure:
.state('pages.products.category', {
abstract: true,
url: '/category',
templateUrl: 'assets/dist/web/modules/products/partials/products.category.html',
controller: 'ProductsCategoryController',
controllerAs: 'productsCategoryCtrl',
resolve: {
CategoriesData: function(CategoriesService) {
return CategoriesService.query();
}
}
})
.state('pages.products.category.content', {
url: '/:categoryId',
templateUrl: 'assets/dist/web/modules/products/partials/products.list.html',
controller: 'ProductsListController',
controllerAs: 'productsListCtrl',
resolve: {
ProductsData: function($stateParams, ProductsService) {
return ProductsService.query({
categoryId: $stateParams.categoryId
});
}
}
})
Now the products.category.html should contain only one <ui-view>. The result is that the abstract parent state pages.products.category (and therefore the category's side nav) isn't reloaded every time you click on a category link in the side nav.
I hope this helps!

Strange behavior of bindToController inside Directive definition

I want to create a chat Application with Angular.js. messages stored inside an Array and i have to bind that array to the HTML view. if i click on every message, i need to an alert() fired inside the controller. my controller is like this:
app.controller("timelineCtrl", function ($scope) {
var self = this;
self.arr={};
// this called from a socket message and pushed it's data to this array
self.arr.push(socket_message);
}
I have this directive:
app.directive('helloWorld', function() {
return {
restrict: 'AE',
scope:{
post: '='
},
template: '<div class="timeline-item"> Hello {{postCtrl.post}} </div>',
controller: 'timelineCtrl',
controllerAs: 'postCtrl',
bindToController: true
};
});
and this is my HTML view:
<div ng-controller="timelineCtrl as postCtrl">
<div ng-repeat="post in postCtrl.arr">
<hello-world post='post'></hello-world>
</div>
</div>
right now, with this structure, when first item goes to array everything is OK, when second item came, doesn't append to array and replaces with first item, then next items behave normal and append to array. why second item replace with first item?
This is my array log in browser console:
It seems this problem related to controller aliasing section inside directive because when i add bindToController and controllerAs: 'postCtrl', this strange behavior appears. first time i press the button HTML updates normally, but next times nothing works. i log that array and it seems when second item arrives, replaces with first item for no reason. it seems an overlapping issue or something like that.

Angular.js / Ionic make Tab-Button only clickable if var is set

how is it possible to not let the user click on the tab-bar, before a scope variable is set. The first view in my app is a view, where you can choose your city. The other Tabs (which uses the value of "city") should only be clickable after the user selects that city. The city is stored in $rootScope.selectedCity and this is the state where the city is needed:
.state('tab.friends', {
url: '/friends/:selectedCity',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
Any suggestions for only making the tabs clickable after the user selects the city? Ty
You can handle ion-tab click by using on-select attribute, see : DOCS
on-select
(optional) |
expression
Called when this tab is selected.
In addition ion-tab supports ng-click as well: See $ionicTabsDelegate usage

Displaying a parent template in child template

I'm working to create a master view cordova/javascript application where a user a presented with a list of products, then depending on what they select, got to a tabbed based detail page about the product. Each tab will be generated depending on which product they pick. Along with the product specific information being loaded, I still want to keep a list a all the products in the view so that a user could switch products when ever they want. Here's an image to help better understand what I'm talking about. .
I tried to use ember.js to get this up and running but ran into a few issues. I can get the initial list of products generated and switch to the product specific details, but once I try to load the master list of products in my second template, everything breaks. I know about including two templates with an {{outlet}} in the parent template but I cant get this to have the child inherit the parent. Is this possible to do in ember or should I start looking at other frameworks like Anuglar? Any help is appreciated.
Displaying nested templates is actually where Ember has an advantage over other frameworks, in my opinion.
This should be really simple using nested resources. In your router, you can do something like
App.Router.map(function() {
this.resource('products', function() {
this.route('product', { path: '/product_id' });
});
});
Obviously, you'll have to fetch your data in each corresponding route. Something like
App.ProductsRoute = Ember.Route.extend({
model: function() {
this.store.find('product');
}
});
App.ProductsProductRoute = Ember.Route.extend({
model: function(params) {
this.store.find('product', params.product_id);
}
});
In your product template you'll need to include an {{outlet}} for all child routes to render into (ie, products.product).
For example
product.handlebars
{{#each}}
{{name}}
{{/each}}
{{outlet}}
products/product.handlebars
Product: {{id}}
Check out the resources section in the guides.
EDIT
If you want the master list to display differently between the products template and the products.product template, remove the master list from the products template and put it in the products.index and the products.product template.
Then specify that both the ProductsIndexController and the ProductsProductController needs its parent model. This will give both templates access to the products via controllers.products.
App.ProductsIndexController = Ember.ObjectController.extend({
needs: 'products',
products: Ember.computed.alias('controllers.products')
});
App.ProductsProductController = Ember.ObjectController.extend({
needs: 'products',
products: Ember.computed.alias('controllers.products')
});
See this jsbin and the associated guides.

Categories

Resources