javascript - 根据从 AngularJS 中的 REST 接收到的值设置单选按钮状态

Question

我想要实现的是根据从 AngularJS 中的服务器检索到的数据设置单选按钮的状态。

让这更特别的是我需要根据条件显示一个 div(汽车有 1 并且只有 1 分配给它)。
如果车是所谓的isSingleUser , div 包含的单选按钮需要可见，否则我们需要隐藏它。

最后，经过一番挣扎，我什至有了实现这一目标的解决方案，但我遇到了一些有趣的障碍，我想与他人分享以供引用，我仍然对替代“解决方案”有一些疑问。

最简单(且有效)的解决方案

我们有 3 辆汽车，汽车服务将根据所选链接获取特定汽车。
只有 car1 和 car2 是 isSingleUser所以 div 应该只对那些汽车可见。
您可以看到单选按钮的状态根据car.isMonitoringAutoEnablementSet JSON 属性。
这是我的第一次尝试，但当时我看不到代码工作，我使用了
输入的 value 属性，错误地，因为 ng-value 更好。

更具体地说，value输入上的属性不能将 bool 值处理为 bool 值(而不是字符串化)
因此 angular 无法映射 bool 值 false至"false" true 也是如此值(value)。
如果我使用 ng-value ， 一切安好。
请注意，每辆车的车牌号都在页面上可见。

让我们看看我后来尝试了什么:

promise 的魔法

我的假设是汽车的数据尚未下载并且模板已呈现
在 Controller 收到数据并将其存储到 $scope.car 之前

所以我为 Controller 添加了这段代码:

$scope.car = Cars.get({carId: $routeParams.carId})
    .$promise.then(function(car) {
          $scope.automonitoring_state = car.isMonitoringAutoEnablementSet;
          $scope.isSingleUser = car.isSingleUser;
     });

并根据新变量修改 View :

<h1 class="title">{{car.plateNumber}}</h1>
  <div class='ng-hide' ng-show='isSingleUser'>
    <p class='paragraph'>automatic
      <form name="myForm" class="toggle">
        <input type="radio" name="state" ng-model="automonitoring_state" ng-value="true">on
        <input type="radio" name="state" ng-model="automonitoring_state" ng-value="false">off
        <button class="button" disabled>save</button>
      </form>
    </p>
  </div>

请注意，plateNumbers 从页面中消失了，清楚地表明存在一些问题
在获取 car 的数据时发生多变的。只有新变量有scope 中的值( automonitoring_state 和 isSingleUser )。
不知何故，即使我放了一个简单的console.log()在 promise 的 then 函数中，car变量不会保存汽车的数据，奇怪......
这个解决方案似乎也是一种解决方法，因为我需要在scope ，但是如果我通过服务保存汽车的状态，我需要同步回我的新$scope.car 的变量所以这个对我来说绝对是不行的。

在 Controller 作用域函数的帮助下解决

然后我用谷歌搜索，在 Stackoverflow 上找到了一些建议，等等。
嘿，有resolve这对于在渲染 View 之前将一些变量传递给 Controller ​​很有用，这正是我想要的。
我天真地尝试从 routeProvider 调用 Controller 函数。像这样 :

when('/driver/cars/:carId', {
  templateUrl: 'partials/driver_car.html',
  controller: 'DriverCarController',
  resolve: 'DriverCarController'.resolveCar
})

并且当然将有问题的功能添加到 Controller 中:

$scope.resolveCar = {
        car: ['$routeParams', 'Cars',
            function($routeParams, Cars) {
                return Cars.get({
                    carId: $routeParams.carId
                }).then(function(car) {
                    console.log('resolve');
                    return car;
                }, function() {
                    return [];
                });
            }
        ]
};

结果是:没有，没有console.log根本证明没有调用该函数。

从解析 传递变量的另一个工作解决方案
此试用版是上述解决方案的略微修改版本。Cars服务仅用于 $routeProvider ，如果 promise 返回值，则保存到 car多变的。

.when('/driver/cars/:carId', {
  templateUrl: 'partials/driver_car.html',
  controller: 'DriverCarController',
  resolve: {
  car : function (Cars,$route) {
      return Cars.get({carId: $route.current.params.carId})
            .$promise.then(function (response) {
               return response;
            });
          }
        }
})

在 Controller 中唯一需要更改的是添加 'car'到注入(inject)列表并保存$scope 的参数.

controllers.controller('DriverCarController', ['$scope', '$routeParams','car', 'SecurityEvents',
  function($scope, $routeParams, car, SecurityEvents) {
    $scope.car = car;
    console.log(car);
  }
]);

请参阅我的公共(public) plunkers，您可以尝试我上面描述的每个解决方案: plunkers

对于判断最可行方法的任何帮助，提供有关每个替代方案的预期用例的一些信息，我们将不胜感激。
谢谢!

Answer 1

2号与我使用的最相似。

要修复这个错误，只需像这样更改 Controller 中的代码:

Cars.get({
   carId: $routeParams.carId
}).$promise.then(function(car) {
     $scope.automonitoring_state = car.isMonitoringAutoEnablementSet;
     $scope.isSingleUser = car.isSingleUser;
     $scope.car = car;
});

我看到从解析中调用服务的最大问题是它将 Controller 与应用程序路由器紧密耦合，这意味着您的 Controller 的可重用性较低。