在同一状态和控制器内的两个视图之间绑定数据

Question

我有一个应用程序，在一个视图中有一个单步执行表单和一个嵌套在同一状态的父视图中的显示值视图。我想知道是否可以将数据绑定到显示视图到显示视图。我无法让它从输入视图绑定到显示视图

 .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'
       }
      }
     })
 });

输入显示控制器

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

输入 HTML

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

显示 html

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

Answer 1

如何在视图之间使用数据共享的方式是通过Model。有一个working plunker。要进一步了解原因，请查看以下内容：

How do I share $scope data between states in angularjs ui-router?

状态定义将保持不变。控制器将引入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'
        }
      }
    });

主要区别在于控制器

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

现在我们引入了模型——引用类型，它将在范围之间共享。

更新的浏览量：

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>

这里解释了为什么这样做 - How do I share $scope data between states in angularjs ui-router?

working plunker

在同一状态和控制器内的两个视图之间绑定数据

binding data between two views within the same state and controller

angularjs

angular-ui-router