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

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

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

然后是模板：

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

一旦指令编译，指令中的currentProduct隔离范围就绑定到product.current。

Answer 2

您有三个主要选择：

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

使用一个范围来统治它们会导致指令（在这种情况下）更少可重用，并且可读性更低（在我看来），因为它们需要某个“接口”（调用范围中的产品对象），没有宣布它。

我选择＃2选项

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

2 个答案: