Javascript 向指令传递一个promise作为atterbute值以用于ng选项会创建无限摘要循环

我的代码中有两个指令，其中父指令的模板包含子指令。子指令被传递一个名为“items”的属性，它调用一个将返回承诺的函数

然后，child指令的控制器接受items承诺并执行“then”以获得结果。然后，这些结果将显示在下拉列表中

我已经使用这段代码有一段时间了，现在还不能理解我得到的警告。而且，我没有得到正确的结果

基本上，当您单击ChangeValue按钮时，它将返回一个不同的数组。奇数和事件数提供了不同的数组（这样我就可以模拟模型的变化）

下面是代码，这里是链接到

父控制器

父指令

子指令

app.directive（“childDirective”，function（））{
返回{
模板：
“选择”，
控制器：“childCtrl”，
范围：{
项目：“在此处的子指令部分

items="ct.getItems()"

您正在为子指令的作用域提供该函数的结果。在本例中，是一个承诺。解决此承诺后，您的子作用域会将ng选项设置为预期的结果。但是，对
ct.getItems（）
的后续调用会创建一个您的子指令不知道的新承诺

在我看来，将结果传递到子级的最干净的方法是将items数组传递到child指令中

是从父指令调用的，更新结果数组。它简化了许多代码。这是您修改的代码。需要注意的主要问题是，子指令绑定到currentItems数组而不是promise，并且每当调用

getItems（）

时，数组都会更新

var app = angular.module("testApp", []);

app.controller("mainCtrl", function($scope, $q) {
  var that = this;
  var deferred = $q.defer();
  that.r = 0;
  var i = [{ name: "toronto" }, { name: "chicago" }, { name: "new york" }];

  var j = [{ name: "Martin" }, { name: "Stephanie" }, { name: "Kirk" }];
  that.currentItems = i;
  this.getItems = function () {

    if (that.r % 2 == 0) {
      console.log("getItems: i returned");
      that.currentItems = i;
      deferred.resolve(i);
    } else {
      console.log("getItems: j returned");
      that.currentItems = j;
      deferred.resolve(j);
    }
    return deferred.promise;
  };

  this.changeVal = function() {
    that.r += 1;
    this.getItems();
    console.log(that.r);
  };
});

app.directive("parentDirective", function() {
  return {
    template:
    '<child-directive items="ct.currentItems"></child-directive><button ng-click="ct.changeVal()">Change Value</button>',
    controller: "mainCtrl",
    controllerAs: "ct",
    scope: {}
  };
});

app.controller("childCtrl", function($scope) {
  $scope.name = "Child controller";
});

app.directive("childDirective", function() {
  return {
    template:
    '<select ng-model="selectedAction" ng-options="x.name for x in items"><option value="">Select</option></select>',
    controller: "childCtrl",
    scope: {
      items: "<"
    }
  };
});

var-app=angular.module（“testApp”，[]）；
应用程序控制器（“mainCtrl”，函数（$scope，$q）{
var=这个；
var deferred=$q.deferred（）；
r=0；
var i=[{name:“多伦多”}，{name:“芝加哥”}，{name:“纽约”}]；
var j=[{name:“Martin”}，{name:“Stephanie”}，{name:“Kirk”}]；
即.currentItems=i；
this.getItems=函数（）{
如果（该.r%2==0）{
log（“getItems:i returned”）；
即.currentItems=i；
推迟。决议（i）；
}否则{
log（“getItems:j返回”）；
即.currentItems=j；
推迟。决议（j）；
}
回报。承诺；
};
this.changeVal=函数（）{
r+=1；
这是getItems（）；
console.log（that.r）；
};
});
app.directive（“parentDirective”，function（））{
返回{
模板：
“更改值”，
控制器：“mainCtrl”，
控制员：“ct”，
作用域：{}
};
});
app.controller（“childCtrl”，函数（$scope）{
$scope.name=“子控制器”；
});
app.directive（“childDirective”，function（）{
返回{
模板：
“选择”，
控制器：“childCtrl”，
范围：{
项目：“
app.controller("childCtrl", function($scope) {
  $scope.name = "Child controller";
  $scope.returnedItems =[];
  $scope.items.then(function(result){
    console.log("Child controller THEN from promise executed");
    $scope.returnedItems = result;
  });
});

app.directive("childDirective", function() {
  return {
    template:
    '<select ng-model="selectedAction" ng-options="x.name for x in returnedItems"><option value="">Select</option></select>',
    controller: "childCtrl",
    scope: {
      items: "<"
    }
  };
});

items="ct.getItems()"

var app = angular.module("testApp", []);

app.controller("mainCtrl", function($scope, $q) {
  var that = this;
  var deferred = $q.defer();
  that.r = 0;
  var i = [{ name: "toronto" }, { name: "chicago" }, { name: "new york" }];

  var j = [{ name: "Martin" }, { name: "Stephanie" }, { name: "Kirk" }];
  that.currentItems = i;
  this.getItems = function () {

    if (that.r % 2 == 0) {
      console.log("getItems: i returned");
      that.currentItems = i;
      deferred.resolve(i);
    } else {
      console.log("getItems: j returned");
      that.currentItems = j;
      deferred.resolve(j);
    }
    return deferred.promise;
  };

  this.changeVal = function() {
    that.r += 1;
    this.getItems();
    console.log(that.r);
  };
});

app.directive("parentDirective", function() {
  return {
    template:
    '<child-directive items="ct.currentItems"></child-directive><button ng-click="ct.changeVal()">Change Value</button>',
    controller: "mainCtrl",
    controllerAs: "ct",
    scope: {}
  };
});

app.controller("childCtrl", function($scope) {
  $scope.name = "Child controller";
});

app.directive("childDirective", function() {
  return {
    template:
    '<select ng-model="selectedAction" ng-options="x.name for x in items"><option value="">Select</option></select>',
    controller: "childCtrl",
    scope: {
      items: "<"
    }
  };
});