Is it possible to have a view per model , ie an edit view for an item, and only that view to be shown for this specific model?
I have a list of tasks, like a todo list. When I click an add button I want an edit view to be shown only for that list and not for every other list I have.
Sorry for my English and possible ignorance on terminology. I am new to Angularjs
My code:
index.html
<div ng-repeat="list in lists" jui-dg-list="{ handle: 'i.fa-arrows' }" class="md-whiteframe-z2 home-drag list" style="top: {{list.ui_top}}px; left: {{list.ui_left}}px;">
<md-subheader>{{list.name}}</md-subheader>
<md-list>
<md-item ng-repeat="task in list.tasks">
<md-item-content>
<div>
<span>{{task.description}}</span>
<span>{{task.completed}}</span>
<span>{{task.priority_id}}</span>
<i class="fa fa-trash-o" ng-click="deleteTask(task, list)"></i>
</div>
</md-item-content>
</md-item>
<div ui-view="newTask"></div>
<i class="fa fa-plus" ng-click="goToState('home.newTask', {id: list.id})"></i>
</md-list>
<i class="fa fa-times" ng-click="deleteList(list)"></i>
<i class="fa fa-arrows"></i>
</div>
app.js
$stateProvider.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeCtrl',
resolve: {
notes: ['NotesLoader', function(NotesLoader){
return NotesLoader();
}],
lists: ['ListsLoader', function(ListsLoader){
return ListsLoader();
}]
}
});
$stateProvider.state('home.newTask', {
url: 'list/:id/task/create',
views: {
'newTask#home': {
templateUrl: 'views/home.newTask.html',
controller: 'NewTaskCtrl'
}
}
});
With this code when I click to add a new task the newTask view will be shown on every list and not on the list I clicked.
That's to be expected because inside to my ng-repeat I have <div ui-view="newTask"></div> so when I go to newTask state every ui-view with the name newTask will be shown.
Is there any way to achieve it only for the model that's was clicked ?
Related
I'm kinda new in Angular and I'm trying to make a simple app using the Routing module with a Parent controller and everything else being a child of that controller.The Problem is that each time the Parent Controller calls a view, a new instance of that child controller is created, wich means my functions get called multiple times, im pretty sure im doing something wrong, not sure what it is...
here's part of my app.js
var module = angular.module('stock', ['ngRoute', 'ngAnimate']);
module.config(function($routeProvider) {
$routeProvider
.when('/Dashboard/', {
templateUrl: '/Dashboard',
controller: 'DashboardCtrl'
})
.when('/Proveedores/', {
templateUrl: '/Proveedores',
controller: 'ProveedoresCtrl'
})
.when('/DatosArticulo/', {
templateUrl: '/DatosArticulo',
controller: 'DatosArticuloCtrl'
})
.when('/IngresarArticulo/', {
templateUrl: '/IngresarArticulo',
controller: 'IngresarArticuloCtrl'
})
.otherwise({
redirectTo: '/Dashboard'
});
});
part of index.html
<body ng-app="stock" ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<div class="dropdown-content">
<a href="#!/IngresarArticulo">
<i style="font-size:22px;margin-right:8px" class="fa fa-plus-circle" aria-hidden="true"></i> Ingresar Articulo
</a>
<a href="#!/Proveedores">
<i style="font-size:22px;margin-right:8px" class="fa fa-product-hunt" aria-hidden="true"></i> Proveedores
</a>
<a href="#!/DatosArticulo">
<i style="font-size:22px;margin-right:8px" class="fa fa-info-circle" aria-hidden="true"></i> Datos Articulo
</a>
</div>
<div style="z-index:50" id="mainContent" class="view-animate-container">
<div ng-view class="view-animate"></div>
</div>
<script type='text/ng-template' id='/Dashboard'>
<!-- Magic from this view-->
</script>
<script type='text/ng-template' id='/Proveedores'>
<!-- Magic from this view-->
</script>
EDIT
The Problem (to be more clear) is that I'm broadcasting an event from the Main controller to one of the childs controller, what the controller does once the event is listened is inserting data to my DB, and since there are multiple instances of that controller, the data gets inserted multiple times, how can i avoid that?
I have a html file
<div class="list">
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i></a>
User Profile
</a>
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i>
Vehicle
</a>
</div>
and a js file
.state('sideMenu.settings.profileSettings', {
url: "/profileSettings",
templateUrl: "templates/Settings/profileSettings.html",
controller: 'profileSettingsController'
})
Now whenever I click on the state. It updates the url. It means it's executing but it doesn't update the view. I have beem scratching my head but can't seem to figure out what the problem is.
There is a working plunker. Not fully sure what is not working, because there are now really many resources and Q & A here revealing the mystery of the UI-Router... but ok
I used your states like this:
.state('sideMenu', {
url: "",
template: '<div ui-view></div>',
})
.state('sideMenu.settings', {
url: "",
template: '<div ui-view></div>',
})
.state('sideMenu.settings.profileSettings', {
url: "/profileSettings",
templateUrl: "templates/Settings/profileSettings.html",
controller: 'profileSettingsController'
})
.state('sideMenu.settings.vehicle', {
url: "/vehicle",
templateUrl: "tpl.html",
})
As we can see, I just showed the parents and added one another state vehicle.
And with the index.html like that:
<div class="list">
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i>
User Profile
</a><br />
<a ui-sref="sideMenu.settings.vehicle" class="item item-icon-left">
<i class="icon ion-email"></i>
Vehicle
</a>
</div>
plus the target somewhere
<div ui-view=""></div> // here will be the parent state injected
It is working. Check it here
Within the Ionic Framework, you can setup tabs. The pages within the tabs can easily transition using a slide-left-right or some other type of transition. This makes the application feel smooth and thought-out.
The issue that I have is that the pages associated with each tab, once clicked from the tab menu, do not transition at all, there is just boom: a page.
I found a pen on codepen (link to codepen demo) that can replicate this effect as I want it (to some degree), but I cannot replicate it in any scenario, much less the Ionic rc0 (1.0) version.
The codepen code uses an animation that seems to not work elsewhere:
<ion-nav-view animation="slide-left-right"></ion-nav-view>
Please assist.
I haven't tried to get that exact example working, but I achieved a similar effect in one of my apps by giving all the tabs the same view name:
app.js
$stateProvider
.state('signin', {
url: "/sign-in",
templateUrl: "sign-in.html",
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: "/forgot-password",
templateUrl: "forgot-password.html"
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'tab-view': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'tab-view': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'tab-view': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'tab-view': {
templateUrl: "about.html"
}
}
})
tabs.html
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
</ion-tabs>
Notice the name "tab-view" for each state and again as the name attribute on the ion-nav-view in each tab.
This helped me to find a solution https://github.com/driftyco/ionic/issues/2997 . The trick is to load all tabs in single view. You can't use ion-tabs directive to achieve that, you you will have to create your tab container using regular html:
<ion-view title="Tabs Controller">
<!-- All tabs are going to load here -->
<ion-nav-view name="menuContent"></ion-nav-view>
<!-- TABS -->
<div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard">
<div class="tab-nav tabs">
<a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.FORUMS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.GROUPS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-topics"></i>
<span translate="TABS.TOPICS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-notifications"></i>
<span translate="TABS.NOTIFICATIONS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-my-profile"></i>
<span translate="TABS.MY_PROFILE_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-more"></i>
<span translate="TABS.MORE_TAB"></span>
</a>
</div>
</div>
your tabs controller should look like this:
.controller('tabsCtrl', function($scope, $ionicConfig, $state) {
$scope.goTabForums = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.forums');
}
$scope.goTabGroups = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.groups');
}
$scope.goTabTopics = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.topics');
}
$scope.goTabNotifications = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.notifications');
}
$scope.goTabProfile = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.profile');
}
$scope.goTabMore = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.more');
}})
And finally routs:
$stateProvider
.state('tabsController.forums', {
url: '/forums',
views: {
'menuContent': {
templateUrl: 'templates/forums.html',
controller: 'forumsCtrl'
}
}})
.state('tabsController.topics', {
url: '/topics',
views: {
'menuContent': {
templateUrl: 'templates/topics.html',
controller: 'topicsCtrl'
}
}})
I have a directive called DisplayAddress which takes in the address .I am using the isolalted scope and the Code performs the checking if the addres fields are blank or not and builds the Object whihc i am displaying it on the view
I have put the View in the code But now the problem arises when i use the one way binding the code throws error with parse string having error:syntax
Syntax Error .
return {
templateUrl: () => {
return "/app/Templates/Common/DisplayAddress"
},
restrict: "E",
replace: true,
scope: {
address: '='
},
controller: "DisplayAddressController",
controllerAs: "vm"
}
<div>
<div class="m-space">
<i class="fa fa-map-marker"></i>
<span data-ng-if="address.AddressType" data-ng-bind="address.AddressType"></span>
<span>{{vm.addressToString()|| ""}}</span>
</div>
<div class="row-m-box">
<span class="m-box" data-ng-if="address.Phone1"><i class="fa fa-phone"></i> <span class="label-content" data-ng-bind="address.Phone1"></span></span>
<span class="m-box" data-ng-if="address.Phone2"> <i class="fa fa-phone"></i> <span class="label-content" data-ng-bind="address.Phone2"></span></span>
<span class="m-box" data-ng-if="address.Fax"> <i class="fa fa-fax"></i> <span class="label-content" data-ng-bind="address.Fax"></span></span>
<span class="m-box" data-ng-if="address.Email"> <i class="fa fa-envelope"></i> <span class="label-content" data-ng-bind="address.Email"></span></span>
</div>
I want to make this directive with least number of watchers and single way bind .what can i do to make this directive a quality code
When I click the emails button it should load the emails page and change the url to /emails.
When I click the texts button it should load the texts page and change the url to /texts.
What is actually happening though the email works fine, but when I click on the texts button the correct ctrl and view is loaded and works BUT my address bar keeps the last url I was on instead of changing to the text url.
My application works fine, but I have no idea what is causing this.
When I enter the url manually and hit enter the correct view and ctrl are loaded as expected, but when I click another link and then click the texts link my address bar has the last url still in it.
GOOD
The URL is wrong it should have /texts.
Email Module Code
/emails/emails.js
angular.module('rmc.contact.emails', [
'rmc.contact.emails.create',
'rmc.contact.emails.edit',
'rmc.contact.emails.preview',
'rmc.contact.emails.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails', {
url: '/emails',
controller: 'EmailsCtrl',
templateUrl: '/apps/rmc/contact/emails/emails.tpl.html'
});
}])
/emails/create/create.js
angular.module('rmc.contact.emails.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.emails.create', {
url: '/create?cardId',
controller: 'EmailsCreateCtrl',
templateUrl: '/apps/rmc/contact/emails/create/create.tpl.html'
});
}])
Text Module Code
/contact/texts/texts.js
angular.module('rmc.contact.texts', [
'rmc.contact.texts.create',
'rmc.contact.texts.edit',
'rmc.contact.texts.preview',
'rmc.contact.texts.view'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts', {
url: '/texts',
controller: 'TextsCtrl',
templateUrl: '/apps/rmc/contact/texts/texts.tpl.html'
});
}])
/contact/texts/create/create.js
angular.module('rmc.contact.texts.create', [])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('rmc.contact.texts.create', {
url: '/create',
controller: 'TextsCreateCtrl',
templateUrl: '/apps/rmc/contact/texts/create/create.tpl.html'
});
}])
The menu links
/contact/contact.tpl.html
<div class='three-full-btns'>
<a ui-sref='rmc.contact.calls.create({ cardId: 0 })' ng-if="hasPermission('rmc.calls')" title='Calls' class='btn'>
<i class='icon-phone'></i>
</a>
<a ui-sref='rmc.contact.emails.create({ cardId: 0 })' ng-if="hasPermission('rmc.emails')" title='Emails' class='btn'>
<i class='icon-envelope'></i>
</a>
<a ui-sref='rmc.contact.texts.create' ng-if="hasPermission('rmc.texts')" title='Texts' class='btn'>
<i class='icon-mobile-phone'></i>
</a>
</div>
<div class='three-full-btns'>
<a ui-sref='rmc.contact.systems.create({ cardId: 0 })' title='Systems' ng-if="hasPermission('rmc.systems')" class='btn'>
<i class='icon-ok'></i>
</a>
<a ui-sref='rmc.contact.forms.create({ cardId: "" })' ng-if="hasPermission('rmc.forms')" title='Forms' class='btn'>
<i class='icon-file-text'></i>
</a>
<a ui-sref='rmc.contact.columns.view({ cardId: "" })' ng-if="hasPermission('rmc.columns')" title='Column Forms' class='btn'>
<i class='icon-columns'></i>
</a>
</div>
Look in your controllers for a $state.go() that is sending you to the state you're already in immediately after the state loads. Doing this will cause the behavior you're seeing.
I think you should explicity declare params in text route, otherwise ui-router does NOT view the param
url: '/texts?cardId'
https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha
May be problem here:
<a ui-sref='rmc.contact.texts.create({ cardId: 0 })'
...
url: '/create',
You missed ?cardId