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 范围，因此它们不会被删除。另一个问题是您直接将“动态”指令附加到当前范围而不创建子范围或隔离指令中的范围(通过 $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(通过下面的 plunkr 中所示的 put)，以便对模板的任何请求都可以自动加载它。您还必须考虑其他一些事情，例如“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

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