如何将变量放在角度指令之外？ [复制]

Question

Ng-table(ng-table site) 可以将$data 变量从他们的指令放到“用户”域之外。只要我知道，我可以随意使用和滥用这个$data 变量，只要它发生在<table ng-table></table> 中，就像这样：

<table ng-table="vm.tableParams" class="table" show-filter="true">
  <tr ng-repeat="user in $data"> <---- where is this $data comes from ?

  </tr>
</table>

我想对我的指令做同样的事情，所以我做了这个：

[JS]

 angular.module('app', [])
  .controller('Controller', ['$scope', function($scope) {
      $scope.variable = "some random variable";
  }])
  .directive('myTable', function() {
   return {
      restrict    : 'E',
      transclude  : true,
      templateUrl : 'my-table.html',
        controller: function($scope){
        $scope.foo = "hello world";
     }
  };
});

[HTML my-table.html]

<div ng-transclude></div>

[HTML 索引.html]

<my-table ng-model="variable">
     <div>{{ foo }}</div>  <!-- foo comes from directive, not controller -->
</my-table>

有效！ working sample, 但是当我将scope 添加到指令时：

return {
  restrict: 'E',
  transclude: true,
  scope:{
    ngModel : "="
  },
  templateUrl: 'my-table.html',
  controller: function($scope){
    $scope.foo = "hello world";
  }
}

它破坏了foo 变量，因此它不再工作not working sample。

我只想将指令内部的foo 变量暴露在外部，这样我就可以在index.html 中使用它，就像上面的ng-table 示例一样。如何做到这一点？

Answer 1

如果您希望 foo 暴露在外部，请将 foo 添加到指令的范围属性中

return {
  restrict: 'E',
  transclude: true,
  scope:{
    ngModel : "=",
    foo : "=" //here we state that foo INSIDE will be the same as passed from higher level
  },
  templateUrl: 'my-table.html',
  controller: function($scope){

  }
}

模板看起来像这样

{{bar}}
<my-table ng-model="variable" foo="bar">
     <div>{{ foo }}</div>  <!-- this is internal 'foo' now which is equal to upper 'bar' value-->
</my-table>

这里是你的 plunk 的演示：https://plnkr.co/edit/VqmaxG2fIFO4k9JrQYRs?p=preview