javascript - 将指令 Promise 作为用于 ng-options 的属性值传递会创建无限摘要循环

Question

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

然后，子指令的 Controller 接受该项目 promise 并执行“then”以获取结果。这些结果将显示在下拉列表中。

我已经使用这段代码有一段时间了，但无法弄清楚我收到的警告。另外，我没有得到正确的结果。

基本上，当您单击“更改值”按钮时，它将返回一个不同的数组。奇数和事件数提供不同的数组(这样我就可以模拟模型的更改)。

下面是代码，这里是 Codepen 的链接

父 Controller

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

  var j = [{ name: "Martin" }, { name: "Stephanie" }, { name: "Kirk" }];

  this.getItems = function () {
    var deferred = $q.defer();
    if (that.r % 2 == 0) {
      console.log("getItems: i returned");
      deferred.resolve(i);
    } else {
      console.log("getItems: j returned");
      deferred.resolve(j);
    }
    return deferred.promise;
  };

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

家长指示

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

子 Controller

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

child 指令

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: "<"
    }
  };
});

当我运行上面的代码时，我确实填充了下拉列表。但之后就没有改变了。

感谢对此的任何帮助。谢谢!

Answer 1

在您的子指令中的部分，

items="ct.getItems()"

您正在为子指令的作用域提供该函数的结果。在这种情况下，是一个 promise 。当这个 promise 得到解决时，您的子范围将 ng-options 设置为预期的结果。然而，对 ct.getItems() 的后续调用会创建一个新的 Promise，而您的子指令对此一无所知。

在我看来，将结果传递给子指令的最简洁方法是将 items 数组传递给子指令。每当从父指令调用 getItems() 时，都会更新结果数组。它简化了很多代码。这是您修改后的代码。主要需要注意的是，child 指令绑定(bind)到 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: "<"
    }
  };
});

Heres a plunker using your example