通过角度指令访问手表内的变量答案

【问题标题】：Access a variable inside watch by a directive in angular通过角度指令访问手表内的变量
【发布时间】：2016-06-27 02:54:11
【问题描述】：

我是 Angular 新手，并且在使用手表时遇到了一些问题。我正在观察控制器内的变量。一旦变量的值改变了，我想把这个改变的值发送给一个指令。

这是手表功能：

$scope.$watch("comboDetail", function(newValue, oldValue) {
  $scope.overlayProductCard = $scope.comboDetail.collectionCd;
  console.log("$scope.overlayProductCardWithinWatch", $scope.overlayProductCard);
}

还有我的指令：（为了阅读而剪掉）

return {
scope: {
      productCard: '='
    },
    restrict: 'E',
    templateUrl: appVersionFactory.getViewBaseUrl() + '/assets/partials/tv/tv-overlay-link.html',
    replace: true,
    link: function($scope, iElm, iAttrs, controller) {
      console.log("$scope.productCard", $scope.productCard);

  };

但是，$scope.productCard 向我返回 undefined，而 $scope.overlayProductCardWithinWatch 向我返回正确的数据。

我如何在指令中接收这些数据？

【问题讨论】：

在您的 html 中，您如何将 productCard 传递给您的指令？ 2路绑定应该负责更新指令的productCard，所以你不需要做任何事情来“传递它”。指令中的console.log 函数在指令首次创建且productCard 为undefined 时运行。它可能会在稍后的某个时间点设置为一个值
应该写在问题中，但这是我的 HTML：
看起来不错。因此，当您更改控制器的 $scope.overlayProductCard 时，它会自动设置指令的 $scope.productCard

标签： javascript angularjs angularjs-scope watch

【解决方案1】：

试试这个：

link: function($scope, iElm, iAttrs, controller) {
  scope.$watch('productCard', function (newValue) {
    console.log("$scope.productCard", newValue);
  })
};

在此之前，从 HTML 中的元素标记传递 productCard，例如：
data-product-card="overlayProductCard"

【讨论】：

【解决方案2】：

假设我有像 <test param="controllerParam"></test> 这样的指令和模板 <div>{{param}}</div>。如果我在控制器中更改 controllerParam，我不需要看/其他东西 - 指令将获得新的价值。如果我想每次更改指令时都在指令中记录新值 - 那么我需要在指令中观察。

链接函数每个元素执行一次，因此您只记录一次变量的值。（首发）

【讨论】：

好洞察力！谢谢你。我不知道每个元素执行一次链接。我正在使用模板来生成指令 HTML，并且我不想按原样显示 overlayProductCard。我需要在发布之前操纵数据。在这种情况下，我该怎么办？
您可以在 html 中使用过滤器 - 这看起来很漂亮，或者在指令中使用 watch 以获得更好的大型数组等性能。