Question

我在AngularJS指令中更新数据时遇到了问题。

该指令在初始化时加载订单列表，然后监视变量orderMade。如果更改了此变量，则应重新加载订单列表。

.directive('listRingorders', ['ringsService',function(ringsService){
  return {
    restrict: 'AE',
    templateUrl : 'pages/list-ringorders.tpl.html',
    scope : { 
        orderMade : '='
    },                                                                      
    controllerAs : 'RingOrderListCtrl',
    bindToController: true,
    controller : function (){

    // variables
    var self = this;

    // load data
    ringsService.fetchRingOrders()
        .then(function(data){
          self.ringorders = data;
        }, function(data){
          alert("Error");
      });

      //log orders
      this.test = function(){
        console.log(self.ringorders);
      }

    },
    link: function (scope, element, attrs) {
            scope.$parent.$watch(attrs.orderMade, function() {
                ringsService.fetchRingOrders()
                  .then(function(data){
                        scope.ringorders = data;
                   }, function(data){
                        alert("Error");
                });
            });
        }
  }
}]);

这里是html模板（简称）

<div ng-repeat="ringOrder in RingOrderListCtrl.ringorders">
  <h3>Order number: {{ringOrder.ID}}</h3>
</div>

我可以正确捕获更改值orderMade并重新加载数据，但是当我更新scope.ringorders变量时，列表不会更新（HTML页面显示相同的数据）。此外，当我在self.ringorders controller函数中记录test()时，它包含旧数据。

我的问题是：如何从scope函数更新指令的link数据？

更新

我已经找到了解决方案 - 我正在访问指令中controller函数的范围，而不是访问指令范围本身。

这是正确的模板（只需将RingOrderListCtrl.ringorders替换为ringorders）

<div ng-repeat="ringOrder in ringorders">
  <h3>Order number: {{ringOrder.ID}}</h3>
</div>

Answer 1

您的问题是您将数据绑定到两个不同的位置（控制器，通过控制器AS和""）。在你的指令链接函数中，你可以通过传入第四个参数来访问指令的控制器：

scope

AngularJS - 从链接函数更新隔离的范围变量

1 个答案: