1

我创建了一个指令（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";
 }]}

父目录 html：

     <child1> </child1>

儿童1 html：

  {{parCtrl.title}}
  {{ch1Ctrl.title}}

最后我的 ParentDirective 是这样初始化的：

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

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

如何将动画交换与具有隔离范围和它自己的控制器的指令一起使用，而不在每次发生交换时重新初始化控制器？

4

1 回答 1

1

正如我们所知，指令是高级标记，它告诉 Angular 的编译器将指定的行为附加到该 HTML 元素。当指令放在 DOM 上时，Angular 的$compile服务将指令名称与其代码匹配，对其进行规范化并执行它。

但是，在添加新元素之前从 DOMng-animate-swap 中删除它的元素。

这意味着每次交换都会重新编译您的指令，并且每次动画发生时都会创建新的隔离范围。

对此的解决方案取决于您的应用程序的功能、模板的大小以及您需要多久执行一次动画（或动画需要什么）：

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 过渡为模板元素设置动画，但这取决于您在做什么以及您希望它看起来如何。

于 2016-06-23T18:01:20.000 回答