binding data between two views within the same state and controller

Question

I have an app that has a step through form in one view and a display values view nested in a parent view in the same state. I'm wondering if it is possible to bind the data to the display view to the display view. I can't get it to bind from the input view to the display view

 .config(function ($stateProvider) {
    $stateProvider
    .state('main.report', {
     url: '/report'
     views:{
      'content@':{
       templateUrl:'/views/report/report.Form.html',
       controller: 'reportCtrl'
        },

       'input@main.report':{
        templateUrl: 'views/report/report.input.html'
        },

      'display@main.report':{
       templateUrl:'views/report/report.display.html'
       }
      }
     })
 });

input display controller

.controller("reportCtrl', function($scope,$http,$state) {
 $scope.reportType =[{label:"Report1",value:"reportOne"}
                    ,{label:"Report2", value:"report2"}]; 
});

input Html

<select name="selectReport" ng-model="selectedreportType" 
  ng-options="reportType.label in reportType in reportTypes"></select>

display html

<table>
<tr>
  <td>Report Type: {{selectedReportType.label))</td>
</tr>
</table>

There's no comma `,` after `url: '/report'`. – kurideja Jan 08 '15 at 04:52 — kurideja, Jan 08 '15 at 04:52
I added it. It's still not binding. – Reagan Stewart Jan 08 '15 at 05:05 — Reagan Stewart, Jan 08 '15 at 05:05
I just saw a missing comma. It was not an answer. – kurideja Jan 08 '15 at 05:11 — kurideja, Jan 08 '15 at 05:11

score 1 · Accepted Answer · edited May 23 '17 at 12:14

The way how to use data sharing among views is via Model. There is a working plunker. To get more understanding why, please check these:

The state definition will be unchanged. The controller will introduce the Model

  $stateProvider
    .state('main.report', {
      url: '/report',
      views: {
        'content@': {
          templateUrl: 'tpl.Form.html',
          controller: 'reportCtrl'
        },

        'input@main.report': {
          templateUrl: 'tpl.input.html',
        }, 

        'display@main.report': {
          templateUrl: 'tpl.display.html'
        }
      }
    });

The main difference is in the controller

.controller('reportCtrl', function($scope, $http, $state) {
    $scope.Model = {};
    $scope.Model.reportTypes = [{
      label: "Report1",
      value: "reportOne"
    }, {
      label: "Report2",
      value: "report2"
    }];
    $scope.Model.selectedReportType = null;
  });

Now we introduced Model - the reference type, which will be shared among the scopes.

The updated views:

input.html

<select name="selectReport" 
  ng-model="Model.selectedReportType"
  ng-options="reportType as reportType.label for reportType in Model.reportTypes"
></select>

display.html

Report Type:
<pre> {{Model.selectedReportType | json}}</pre>

Why that works is explained here - How do I share $scope data between states in angularjs ui-router?

The working plunker

binding data between two views within the same state and controller

1 Answers1