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>

myControler：

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

我从未亲自完成此操作，但我相信它会为每个命名视图实例化控制器的新实例，而不是“共享”控制器的单个实例。

每次以不同的模型重复使用Angular html视图

1 个答案: