Question

我已经注意到了对我来说似乎是一个错误，但可能更多的是我误用了AngularJS中的$compile服务：我有一个名为“dynamic”的指令，它编译angularjs代码并将其显示为div 。在这种情况下我编译的代码包含ng-controllers，这些控制器正在侦听事件。问题是显然控制器在被替换后并没有“死”，因为应该消失的控制器仍然会对事件做出反应（如$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);
            });
        }
    };
});

主控制器，然后是我包含的控制器：

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。

你可能想做什么：

使用指令的关键（特别是在尝试＆＃34; $ compile＆＃34;动态内容时，确保您知道在哪里传递范围。对于angularjs中内置的大多数指令，angular会自动处理创建（通过{ {3}}）和破坏（通过scope.$new()）。由于您没有明确地“销毁”范围，因此不会删除它们。另一个问题是您直接附加＆＃ 34;动态＆＃34;指令当前范围而不在指令中创建子范围或隔离范围（通过$ new）：

scope.$destroy()

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所示），这样任何对模板的请求都可以自动加载它。您还必须考虑其他一些事项，例如＆＃39; html是否已正确消毒？＆＃39;或者我是否希望我的内容能够正常制作动画？＆＃39;。这些东西会在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>");
})

现在您所要做的就是使用预先构建的Plunkr example，如下所示：

<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 directive

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

AngularJS编译的代码保持“在后面”

1 个答案: