javascript - AngularJS 编译后的代码保留为 "in the back"

Question

我注意到对我来说似乎是一个错误，但可能更多的是我滥用了 AngularJS 中的 $compile 服务:我有一个名为“dynamic”的指令，它编译 AngularJS 代码并显示它进入一个div。在这种情况下我编译的代码包含 ng-controllers 并且这些 Controller 正在监听事件。问题在于，显然 Controller 在被替换后并没有“死亡”，因为应该消失的 Controller 仍然会对事件使用react(例如 $routeChangeSuccess 或任何其他事件)。 这是一个工作plunkr这说明了问题所在。 让我们看一下我的问题的示例代码:

我正在使用的指令:

app.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                element.html(html);
                $compile(element.contents())(scope);
            });
        }
    };
});

主 Controller ，然后是我包含的 Controller :

app.controller('TestCtrl', function($scope) {
  $scope.dynamicContent = "Default content";

  $scope.firstButton = function() {
    $scope.dynamicContent = "<div ng-controller='FirstCtrl'>The div from first button</div>";
  }

  $scope.secondButton = function() {
    $scope.dynamicContent = "<div ng-controller='SecondCtrl'>The div from second button</div>";
  }

  $scope.checkButton = function() {
    $scope.$broadcast('checkEvent');
  }
});

app.controller('FirstCtrl', function($scope) {
  $scope.$on('checkEvent', function() {
    alert(1);
  });

});
app.controller('SecondCtrl', function($scope) {
  $scope.$on('checkEvent', function() {
    alert(2);
  });
});

现在，如果我调用 firstButton() 然后 secondButton() 然后 checkButton()，而不是只接收 alert( 2)，我收到两个警报。如果我点击按钮 1/2/1/2/1/2/1/2，它会显示与我点击的按钮一样多的警报。

我在这里做错了什么？

谢谢，希尔纽斯

Answer 1

你们真的很亲密。首先，我将告诉您您可能想要做什么，因为我不知道您对 $compile 服务的意图。然后我将解释为什么您不需要此特定实例的 $compile 服务，因为您有效地复制了 ng-include。

您可能想要做什么:

使用指令的关键(尤其是在尝试“$compile”动态内容时，确保您知道什么作用域传递到了哪里。对于 Angularjs 中内置的大多数指令，Angular 自动处理创建(通过 scope.$new() )和销毁(通过 scope.$destroy() )。由于您没有显式 '$destroy'-ing 作用域，因此它们不会被删除。另一个问题是您直接将“dynamic”指令附加到当前作用域，而不创建子作用域或隔离指令中的范围(通过 $new):

Plunkr example

app.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var curScope = null,
              curEle = null;

          function removeOld(){
            if( curScope ){
              curScope.$destroy();
              curScope = null;
              curEle.remove();
              curEle = null;
            }
          }

            scope.$watch(attrs.dynamic, function(html) {
                removeOld();
                curScope = scope.$new(); //creates child scope (not isolate)
                //probably should do some proper escaping here see $sce service
                curEle = angular.element( html );
                if( !curEle.length ){
                  curEle = angular.element('<span>'+html+'</span>');
                }
                $compile( curEle )(curScope);
                element.append( curEle );
            });
        }
    };
});

你可能应该做什么:

对于像这样的一些小模板，您可能应该考虑将它们放入 $templateCache 中(通过 put ，如下面的 plunkr 所示)，以便对模板的任何请求都可以自动加载它。您还必须考虑其他一些事情，例如“html 是否已正确清理？”或者“我想要我的内容正确地动画化吗？”。这些事情是在 ng-include 中自动处理的，它几乎看起来像是您试图复制的。

Plunkr example

app.run(function( $templateCache ){
  $templateCache.put("btn_default.html", "Default content");
  $templateCache.put("btn_one.html", "<div ng-controller='FirstCtrl'>The div from first button</div>");
  $templateCache.put("btn_two.html", "<div ng-controller='SecondCtrl'>The div from second button</div>");
})

现在您所要做的就是使用预先构建的 ng-include directive像这样:

<div ng-controller="TestCtrl">
      <div class="btn btn-default" ng-click="firstButton()">First button</div>
      <div class="btn btn-default" ng-click="secondButton()">Second button</div>
      <div class="btn btn-default" ng-click="checkButton()">Check events</div>
      <div ng-include="dynamicContent"></div>
</div>

ng-include source to help you out

希望这有助于更好地理解。