对如何在指令之间传递数据/范围感到困惑

Question

我有以下代码：

<div class="row">
  <div class="col-md-12">
    <h1>{{ product.current.name }}</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <form class="form">
      <div sa-product-general></div>
      <div sa-product-images></div>
      <div sa-product-buttons></div>
    </form>
  </div>
</div>

我使用的是 Controller As 语法，所以主控制器被称为 product 并且它为 current 设置了一个变量，这是当前的产品对象。

在表单的 3 个指令中，我需要访问同一个产品对象。

我不确定我是否应该为此使用共享或隔离范围，以及通常处理它的最佳方法是什么。

你能帮忙吗？

代码示例：

angular.module('saProducts').directive 'saProductPage', ->
  restrict: 'AE'
  templateUrl: 'app/products/product/product-page.html'
  controllerAs: 'product'
  controller: ($stateParams, $state, Product) ->
    @current = Product.get(id: $stateParams.id)

angular.module('saProducts').directive 'saProductButtons', ->
  restrict: 'AE'
  templateUrl: 'app/products/product/buttons.html'
  scope:
    currentProduct: '='
  controllerAs: 'productButtons'
  controller: ($scope, $state) ->
    @update = ->
      $scope.currentProduct.$update()

    @delete = ->
      $scope.currentProduct.$delete()
      $state.go('products')

更新标记

<div class="row">
  <div class="col-md-12">
    <h1>{{ product.current.name }}</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <form class="form">
      <div sa-product-general></div>
      <div sa-product-buttons current-product="product.current"></div>
    </form>
  </div>
</div>

但是这些都是未定义的??

angular.module('saProducts').directive 'saProductButtons', ->
  restrict: 'AE'
  templateUrl: 'app/products/product/buttons.html'
  scope:
    currentProduct: '='
  controllerAs: 'productButtons'
  controller: ($scope, $state) ->
    console.log @currentProduct
    console.log currentProduct

答案

使用：bindToController: true

Answer 1

您有三个主要选择：

不使用指令 - 除非它们被多次使用。
使用隔离范围，并传入 product 对象。我会使用元素指令而不是属性指令。
使用共享作用域，并在每三个指令中访问同一作用域中的product。

使用一个范围来统治它们会导致指令（在本例中）的可重用性较差，可读性较差（在我看来），因为它们需要特定的 "interface"（产品对象中的调用范围），而不声明它。

我会选择选项 #2

Answer 2

这里有几个选项。最明智的方法是为产品使用隔离范围和双向数据绑定。所以在指令声明中是这样的：

app.directive('something', function() {
    return {
        scope:  {
             currentProduct: '='
        }
    }
})

然后是模板：

<div something current-product="product.current"></div>

指令编译后，指令隔离范围内的 currentProduct 绑定到 product.current。

对如何在指令之间传递数据/范围感到困惑

Confused about how to pass data / scope between directives

angularjs

angularjs-directive