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。为了更好地理解原因，请查看以下内容：

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

现在我们介绍了Model - 引用类型，它将在作用域之间共享。

更新后的观点：

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

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

1 个答案: