CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-router
Sadok Mtir
Sadok Mtir

Reputation: 615

Abstract state with template in ionic

I am working with ui-router AngularJS in Ionic Project. I have an abstract state where I nest my children's templates via <ion-nav-view> tag. The question is can I display some default data in the template of the abstract state that will be shown for all the children's templates ?? If no then Why. I tried this simple example 

<ion-view view-title="MyView">
  <div>
   <h1>Welcome</h1>
  </div>
  <ion-nav-view name="ChildContent"></ion-nav-view>
</ion-view>

But the message Welcome is not shown. The space for the div is there but nothing is displayed.

Upvotes: 0

Views: 183

Answers (2)

Sadok Mtir
Sadok Mtir

Reputation: 615

I think I found the solution. What I ended with to not repeat the same info within all the children templates is to create a custom directive with its own template and just include this directive in every child's template. So, we just have one place to manipulate. It is the section "Template-expanding directive" in Angular documentation. More informations could be found in this link : enter link description here. Hope it will help someone else :) .

Upvotes: 1

sioesi
sioesi

Reputation: 517

You can define a controller for your abstract state and there setear default values that can be displayed in various other views. You can also do this in the function 

.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
})

.controller('AppCtrl', function($scope){
    $scope.title = "Test title";
})

OR 

angular.module('started.controllers', [])

.run(function($window, $rootScope) {
    $rootScope.title = "Test title";
});

<ion-view view-title="{{title}}">
   <div>
     <h1>Welcome</h1>
  </div>
  <ion-nav-view name="ChildContent"></ion-nav-view>
</ion-view>

Upvotes: 0

Related Questions