时间戳

首页 > 解决方案 > 每次重用具有不同模型的Angular html视图

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

问题描述

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

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

首选项.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. 最终我想收集所有模型/视图的值并将它们发送到后端。

标签： angularjsangularjs-directiveangularjs-material

解决方案

如果您使用 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'     
      }     
    }       
  })

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

推荐阅读