AngularJS ui-router: parameters for views

Question

In my AngularJS webapp based on ui-router, I have a state with several views.

I'd like to use the same template/controller (same instance of the controller) in 2 different views with a parameter. I already have the template and the controller.

  .state('home.action', {
    url: '/action',
    views:{
      'criteria@home.action':{
        templateUrl: 'criteria.html'
      },
    }
  })

I would need to have a string parameter with a static value different for the 2 views.

In action.html:

<div ui-view="criteria"/> //with param="criterias1"
<div ui-view="criteria"/> //with param="criterias2"

I'd like to use this param in the criteria.html template.

What is the best solution for implementing this ?

Regards.

Duplicate, please check http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller — udalmik, Sep 04 '15 at 09:19

score 0 · Answer 1 · answered Sep 04 '15 at 09:13

0

.state('home.action', {
    url: '/action/:theValue',
    templateUrl: 'criteria.html'
  })
.state('home.action', {
    url: '/action/:theValue',
    templateUrl: 'criteria.html'
  })

The values, theValue is available inside your controller as, $stateParams.theValue

answered Sep 04 '15 at 09:13

Right but I have only one instance of the controller. – user3181983 Sep 04 '15 at 12:10

score -1 · Accepted Answer · edited May 23 '17 at 11:51

I've found the solution.

Duplicate of this question

It works with onload.

Example: HTML

<script type="text/ng-template" id="section.html">
    <div>section {{ someValue }}. Type : {{ type }}</div>
</script>

<script type="text/ng-template" id="main.html">
    <h2>main content</h2>
    <div ui-view="section1" onload="type = 'type1'"></div>
    <div ui-view="section2" onload="type = 'type2'"></div>
</script>

<div>
    <h1>header</h1>
    <div ui-view></div>
<div>

And same state.

AngularJS ui-router: parameters for views

2 Answers2