AngularJS：指令、控制器、模板之间的正确交互、分离

我一直在努力以一种有角度的方式做事，目前我正在努力理解指令的正确使用，以及它们与应用程序整体生态系统的关系。目前，我正在尝试处理一个表单的基本逻辑，其中包含不同的、可编辑的元素和提交或还原表单状态的取消/保存按钮

这是我所拥有的，正在发挥作用。我正在使用Slim模板和CoffeeScript，所以我将尝试将其清理成简单的HTML和JS，所以请假设任何破坏应用程序的语法错误都是由于本文的错误输入造成的

# excerpt of the template

<div my-form ng-repeat="band in bands">
  <div class="band-name">
    {{band.name}}
  </div>

  <div class="edit-band" ng-click="editBand(band)">
    Click to edit
  </div>

  <div ng-if="editingBand != band">
    {{band.tagline}}
  </div>

  <div ng-if="editingBand == band">
    <form class="form-horizontal" ng-submit="updateBand(band)">
      <input type="text" ng-model="band.tagline" />
      <input class="btn btn-default" type="submit" />
    </form>
  </div>

  <div ng-if="uncommitedChanges">
    <button ng-click="saveChanges()">Save</button>
    <button ng-click="cancelChanges()">Cancel</button
  </div>
</div>


---------------excerpt of controller

# during init
$scope.bands = bands;
$scope.originalBands = angular.copy(bands);
$scope.uncommittedChanges = false

$scope.editBand = function(band) {
  $scope.editingBand = band;
}

$scope.updateBand = function(band) {
  $scope.editingBand = null;
  $scope.uncommittedChanges = true;
}

$scope.cancelChanges = function(){
  $scope.bands = angular.copy($scope.originalBands);
  $scope.uncommittedChanges = false
}

$scope.saveChanges = function(){
  $scope.uncommittedChanges = true;
  // bands are sent to the service that performs the update against the API
}

#模板摘录
{{band.name}
单击以编辑
{band.tagline}
拯救
取消这正是AngularJS中的工作方式：）
若您看到可以将一些代码封装到指令中以重用它，那个么就去做吧。但我不认为任何人，除了你们，可以说你们可以在那个例子的代码中重用什么：）也许你们想把ng repeat中的代码放到指令中

注意：
ng如果
是一个强大的指令，并且在与
ng show
的工作中存在差异，我建议您阅读相关内容。
因此，这既不是超级复杂，也不是太宽，无法简单回答。这可能不是最好的方法，但这只是一个开始。欢迎提出建议

我在阅读一些博客时注意到，您可以定义一个负责指令的控制器。知道了这一点，“我如何将我的功能移出控制器并移入指令？”问题的解决方案可以用“你不，你将它们移入专用于你的指令的控制器”来回答

在模板中，我这样称呼它：

<div id="show-bands" class="col-md-8" bands-form bands="bands"></div>

我使用
scope:{bands:'=bands'}
创建隔离作用域，这意味着调用指令时，我将
bands
属性设置为相等的任何模型都将传递到指令中。这相当于Rails ERB模板中的

最后，
BandFormCtrl
是专用于此指令的新控制器。它包含此重构之前共享控制器中的所有内容。只要定义了
条带并能够将其传递下去，一切都会正常工作。
太好了！但是如何将这种行为转化为指令呢？关于指令中的作用域和声明变量的所有选项都有点难以接受。我可能应该隔离作用域，在开始时声明
波段
，但是。。。然后呢？如何回答呢？在很多教程和书籍中，这个问题已经被回答了很多次。我推荐这本书。或者你也可以在这里找到其他的东西：我不是有意让你听起来粗鲁，但这是真的吗？没有办法说，“如果在指令中实现，控制器中定义的这些函数可能看起来像这样；在这种情况下，将逻辑从控制器移动到指令看起来像这样”，或者类似的东西？在描述模板、控制器、模型、模块等之间共享的逻辑时，如果有人问Ruby或Rails这个问题，我会知道怎么做，。。。这不能用Angular来表示吗？如果我代替你写代码，它不会给你任何东西。指令逻辑应该在指令中，而不是在BandFormController中。指令的主要目标是可重用。它意味着独立于控制器和视图（只有服务作为可能的依赖项）。这是可重用的，因为它是孤立的。此控制器不被任何东西共享，它仅由该指令调用，其范围由该指令提供。它是否存在于单独的文件中或指令声明本身并不重要。使用专用于指令的控制器似乎很常见，但如果您有任何资源解释替代方法或为什么不这样做，我很乐意阅读它们。我没有找到。
myApp.directive 'bandsForm', () ->
  return {
    scope: {
      bands: '=bands'
    }
    templateUrl: 'directives/bands/band_form.html'
    controller: 'BandFormCtrl'
  }