Question

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

所以，我在“主要展示”中有这个

<div ng-controller="Main as vm">    
<div style="display:inline-block"
     ng-repeat="e in vm.car"         
     ng-include="'app/car/car.html'" />    
</div>

[编辑]我删除了上面的ng-controller="Car"表格

主控制器代码..

function Main($scope) {
  var vm = this;
  vm.car = [];
  var i;
  for (i = 1; i <= 100; i++)
    vm.car.push({ title: "Car 00" + i });
}

和Car控制器如下..

(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;
}
})();

最后，Car模板html如下..

<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>

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

这里有几件我不明白的事情

在Car控制器中，我不得不将“vm”称为vm的另一个名称，（即我称之为“evm”，当我使用“vm”时，它似乎无效。
我的实际问题是当我尝试通过onChanged回调更新其中一个属性时，即行evm.title = data;。这里DOM不会更新。我可以在evm.title上看到设置了新值，但显示内容不会更新。

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

提前感谢任何建议！

Answer 1

虽然将Plunker放在一起（只需删除一项服务以简化），但我发现了我的问题。 localViewModel;和onChanged的范围不正确。疯狂地，在Plunker中进行调试帮助我解决了这个问题。

因此Car控制器需要在Car函数内部放置onChanged AND 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在此过程中提出的建议。

使用Controller As的ngRepeat控制器中的角度范围

1 个答案: