每次重用具有不同模型的Angular html视图

Question

我目前正在开发一个 AngularJS 应用程序，它提供了一个带有不同滑块的视图，允许用户在 preferences.html 文件中指定首选项（使用 Angular Material）。现在我想扩展这个应用程序以允许不同的用户同时使用它。这意味着preferences.html 会显示多次，每个用户一个实例。但是，每次调用 preferences.html 时，都应该将首选项发送到另一个 ng-model。

到目前为止，我的代码如下所示（单个用户的偏好获取）：

preferences.html：

<div ng-controller="myController as myCtrl">
  <div layout="row">
    <h2>One</h2>
    <md-slider class="preference-slider" min="0" step="1" max="20" ng-model="myCtrl.preferenceOne" id="slider"></md-slider>
    <p class="preference-value">{{myCtrl.preferenceOne}}</p>
    <h2>Two</h2>
    <md-slider class="preference-slider" min="0" step="1" max="20" ng-model="myCtrl.preferencesTwo" id="slider"></md-slider>
    <p class="preference-value">{{myCtrl.preferencesTwo}}</p>
  </div> 
</div>

我的控制器：

var app = angular.module('myApp');
app.controller('myController', function($rootScope, $scope, $filter, $timeout) {
  this.PreferenceOne = 10;
  this.PreferenceTwo = 10;
  ...
});

每个用户的偏好视图应该同时显示，如下所示：

<div ng-include="preferences.html" ng-show="isReady"></div> (for User 1)
<div ng-include="preferences.html" ng-show="isReady"></div> (for User 2)
...

我发现类似问题的解决方案使用指令，但他们总是尝试只使用一个视图和多个模型。但是，我希望拥有多个视图实例，并且每个实例都应使用不同的ng-model。最终我想收集所有模型/视图的值并将它们发送到后端。

Answer 1

如果您使用 ui-router 命名视图，并将每个视图连接到相同的“preferences.html”模板和“preferencesController”或其他什么，那会起作用吗？每个实例本质上是一个单一的表单，并且屏幕可以同时允许多个活动用户（例如，单屏触摸屏信息亭）？

<ui-view name="user1" />
<ui-view name="user2" />
etc.

最终你的要求是“让我成为指令”，但如果你出于某种原因想要这样做，我理解。我也喜欢偷工减料。

编辑！

试试这个：

$stateProvider      
  .state('multiUser',{      
    views: {        
      'user1': {        
        templateUrl: 'preferences.html',        
        controller: 'preferencesController'     
      },        
      'user2': {        
        templateUrl: 'preferences.html',        
        controller: 'preferencesController'     
      }     
    }       
  })

我从来没有亲自这样做过，但我相信它会为每个命名视图实例化一个新的控制器实例，而不是“共享”一个控制器实例。