Javascript 使用控制器作为对象的ngRepeat控制器内的角度范围

我有一个应用程序，它有一个主显示，其中将包含许多子元素，我希望为每个元素使用一个“模板”，然后在我有来自服务的数据时更新每个元素的属性

我把这个放在“主显示器”里

汽车控制器如下所示

(function () {
'use strict';

angular
    .module('app.car')
    .controller('Car', Car);

car.$inject = ['$scope', 'carservice'];

var localViewModel; // EDIT
function Car($scope, carservice) {
  // $scope comes in as the parent scope
  var e = $scope.vm;
  var i = $scope.$index;

  // EDIT
  localViewModel= $scope.evm;

  localViewModel.title = e.car[i].title;

  // Pass in a call back for server changes on this object
  carservice.subscribeChangeEvent(localViewModel.title, $scope, onChange)

  localViewModel.properties = [];
  localViewModel.properties.push("Dest A");
  localViewModel.properties.push("Ammie Grey");      
};

function onChange(msg, data) {
  if (msg == "title")
    localViewModel.title = data;
}
})();

<div ng-controller="Car as evm" class="car-card" style="padding: 0px">
   <div class="cartitle">
      <div class="cartext" style="color:white;font-size:1.1em">{{evm.title}}   </div>
     </div>
   <ul class="carul" ng-repeat="p in evm.properties">
      <li>{{p}}</li>                
   </ul>
  </div>

最后，汽车模板html如下所示

(function () {
'use strict';

angular
    .module('app.car')
    .controller('Car', Car);

car.$inject = ['$scope', 'carservice'];

var localViewModel; // EDIT
function Car($scope, carservice) {
  // $scope comes in as the parent scope
  var e = $scope.vm;
  var i = $scope.$index;

  // EDIT
  localViewModel= $scope.evm;

  localViewModel.title = e.car[i].title;

  // Pass in a call back for server changes on this object
  carservice.subscribeChangeEvent(localViewModel.title, $scope, onChange)

  localViewModel.properties = [];
  localViewModel.properties.push("Dest A");
  localViewModel.properties.push("Ammie Grey");      
};

function onChange(msg, data) {
  if (msg == "title")
    localViewModel.title = data;
}
})();

<div ng-controller="Car as evm" class="car-card" style="padding: 0px">
   <div class="cartitle">
      <div class="cartext" style="color:white;font-size:1.1em">{{evm.title}}   </div>
     </div>
   <ul class="carul" ng-repeat="p in evm.properties">
      <li>{{p}}</li>                
   </ul>
  </div>

{{evm.title}

{{p}}

当我第一次显示它时，一切似乎都按预期呈现。我的问题是当我想更新“车”上的属性时

这里有几件事我就是不明白

• 在汽车控制器中，我不得不用与vm不同的名称来称呼“vm”（即我称之为“evm”），当我使用“vm”时，它似乎不起作用

• 这里我的实际问题是，当我试图通过

  onChanged

  回调更新其中一个属性时，即行

  evm.title=data；

  。在这里，DOM不会更新。我可以看到在

  evm.title

  上设置了一个新值，但显示不会更新

有人知道这里可能有什么问题吗？我使用的是完全错误的方法，还是在这种“嵌套”的情况下我不应该使用“Controller As”

---

提前感谢您的建议！

在为此整合服务时（只需删除一个服务以简化），我发现了我的问题。

localViewModel；

和

一旦更改

不在正确的范围内。疯狂的是，Plunker中的调试帮助我找到了问题

因此，汽车控制器需要将

onChanged

和

localViewModel；

功能范围限定在功能汽车内部，因此它成为

(function () {
 'use strict';

  ...
 function Car($scope, msgservice) {
   // $scope comes in as the parent scope
   var e = $scope.vm;
   var i = $scope.$index;

   var localViewModel; // THIS IN HERE
   var id;

   localViewModel= $scope.evm;
   localViewModel.title = e.car[i].title;
   id = e.car[i].title;

   // Pass in a call back for server changes on this object
   msgservice.subscribeMessage('title', $scope, onChange);

   localViewModel.properties = [];
   localViewModel.properties.push("Dest A");
   localViewModel.properties.push("Ammie Grey");      

  // THIS IN HERE TO GET TO LOCAL localViewModel
  function onChange(msg, data) {
    if (id != "CAR 001")
      return;

    localViewModel.title = data;
   }
 }
})();

---

感谢@Elfayer为您提供的建议。

在为这项工作整合服务时（只需删除一项服务以简化），我发现了我的问题。

localViewModel；

和

onChanged

不在正确的范围内。疯狂的是，在Plunker中调试帮助我找到了它

因此，汽车控制器需要将

onChanged

和

localViewModel；

功能范围限定在功能汽车内部，因此它成为

(function () {
 'use strict';

  ...
 function Car($scope, msgservice) {
   // $scope comes in as the parent scope
   var e = $scope.vm;
   var i = $scope.$index;

   var localViewModel; // THIS IN HERE
   var id;

   localViewModel= $scope.evm;
   localViewModel.title = e.car[i].title;
   id = e.car[i].title;

   // Pass in a call back for server changes on this object
   msgservice.subscribeMessage('title', $scope, onChange);

   localViewModel.properties = [];
   localViewModel.properties.push("Dest A");
   localViewModel.properties.push("Ammie Grey");      

  // THIS IN HERE TO GET TO LOCAL localViewModel
  function onChange(msg, data) {
    if (id != "CAR 001")
      return;

    localViewModel.title = data;
   }
 }
})();

---

感谢@Elfayer一路上的建议。

你能提供小提琴吗？你既有

ng controller=“Car”

又有

ng controller=“Car as evm”

，这是我的选择吗？@AnikIslamAbhi我想我不能用

ng include=“'app/Car/Car.html.”

@tasseKATT查看上面的编辑，我删除了汽车控制器的副本，希望能让它更清晰一些。不幸的是，DOM仍然没有更新（到localViewModel.title，其中localViewModel设置为

localViewModel=$scope.evm

我来看看：）你能提供fiddle吗？你两个都有

ng controller=“Car”

和

ng controller=“Car as evm”

，这是我的选择吗？@AnikIslamAbhi我认为我不能用

ng include=“'app/Car/Car.html'”

@tasseKATT查看上面的编辑，我删除了汽车控制器的副本，希望能让它更清晰一些。不幸的是DOM仍然没有更新（到localViewModel.title，其中localViewModel设置为

localViewModel=$scope.evm

I将查看：）