Angularjs 与之相关的指令'；放置在ngAnimateSwap中的自己的控制器会导致在每个'；互换'；

我创建了一个指令（ParentDir），它有自己的控制器，并且其模板绑定到此控制器。它与另一个指令（Child1）通信，该指令有自己的控制器，该控制器“需要”第一个父指令。下面是一个简化的示例：

Module.directive("ParentDir", function () {
 return {
    templateUrl: '../ParentTemplate',
    restrict: 'AEC',
    scope: {       
        },
    controllerAs: 'parCtrl',
    bindToController: true,
    controller: ['$scope', function ($scope) {
        parCtrl= this;
        parCtrl.title = "PARENT 1 TITLE";
      }]}


 Module.directive("Child1", function () {
return {
    templateUrl: '../Child1Template',
    restrict: 'AEC',
    require: '^^ParentDir',
    scope: {},
    controllerAs: 'ch1Ctrl',
    bindToController: true,

    link: function ($scope, element, attrs, parCtrl) {
        $scope.parCtrl= parCtrl;
    },

    controller: ['$scope', function ($scope) {
           ch1Ctrl= this;
           ch1Ctrl.title = "CHILD 1 TITLE";
 }]}

ParentDir html：

     <child1> </child1>

最后，我的ParentDirective初始化如下：

  <div ng-animate-swap="trigger" class="swapclass">
         <parent-dir></parent-dir>
   </div>

我需要整个父指令的模板在某些情况下滑动。我也在其他我不需要的地方使用这个指令，我可以按原样使用它。在我确实需要幻灯片动画的情况下，我将其放置在ng动画交换中，如上所示。问题是，每次交换触发器更改时，都会初始化一个新的parCtrl，导致所有内容重置

---

如何将animate swap与具有隔离作用域及其自己的控制器的指令一起使用，而不必在每次交换发生时重新初始化控制器？

指令是高级标记，告诉Angle的编译器将指定的行为附加到该HTML元素。在DOM上放置指令时，Angular的

$compile

服务将指令名称与其代码匹配，对其进行规范化并执行

但是，

ng animate swap

在追加新元素之前，会从DOM中删除其元素

这意味着每次交换都要重新编译指令，每次动画发生时都会创建新的隔离作用域

此问题的解决方案取决于应用程序的功能、模板的大小以及您需要制作动画的频率（或动画所需的内容）：

一种解决方案是在交换动画之外创建另一个指令，该指令包含

parCtrl.title

和

ch1Ctrl.title

（或任何其他变量），然后能够通过原型继承将该信息传递给子作用域：

    <swap-dir>
      <div ng-animate-swap="trigger" class="swapclass">
        <parent-dir></parent-dir>
      </div>
    <swap-dir>

这也可以用一个控制器来完成，也许更容易。您选择做什么取决于从何处获取范围变量以及页面上有多少不同的元素

然而，

ng animate swap

创建了它自己的作用域，所以虽然我相信这会起作用，但有趣的JavaScript继承把戏也可能在这里引起问题

---

另一个解决方案是跳过

ng animate swap

，只使用常规的旧CSS转换为模板元素设置动画，尽管这取决于您正在做什么以及希望它看起来如何。

动画交换非常有用，因为我可以轻松地“滑入”更新的父目录DOM和更新的数据。有没有其他方法可以让这个动画化？一个简化的示例正是angular docs中的示例：。数字正在改变，但他们可以让它“滑入”。

    <swap-dir>
      <div ng-animate-swap="trigger" class="swapclass">
        <parent-dir></parent-dir>
      </div>
    <swap-dir>