Question

拥有一个我想要使用ng-include加载并为其分配控制器实例的模板。需要加载此新模板/范围/控制器以响应用户交互（悬停或单击）。

必须使用element.innerHTML设置模板的内容，因为内容是由第三方设置的。

然后用户可以单击新div，我想销毁已创建的控制器/范围。

我希望实现的伪代码：

popup.setContent("<div ng-controller='PopupController'><div ng-include=\"views/LayerPopup.html\"></div></div>");

如何判断角度来处理ng-include和ng-controller，就像第一次加载页面一样？

谢谢！

编辑：
添加plunker来说明问题
http://plnkr.co/edit/DPuURCoq2hJ0LCLIN2dc?p=preview

Answer 1

http://jsfiddle.net/ADukg/5420/

不使用ngInclude，但确实符合以下条件：

您传入了templateURL。
传入您想要使用的控制器的名称。
传入第三方内容（后者依次设置为$element.innerHTML）。
在弹出窗口的$ scope之外的某个位置设置一个单击侦听器，这会在弹出窗口上触发kill命令。

我想象你会实例化它：

<directive tpl="tpl.html" 
           ctrl="DirectiveController" 
           third-party-content="{{thirdPartyContent}}">
</directive>

不确定这会适合你，但我把它放在一起很有趣，也许它会对其他人有用。

无论如何，我必须同意你迄今为止所收到的评论。对于您现在必须使用的内容以及可用的选项，您有点神秘。

Answer 2

Here is a plunker你想要做什么。如果你点击一个按钮，弹出窗口会显示一个模板，你可以点击该模板，它会保持不变，但如果你点击它，它就会被删除。

<强> HTML

<body ng-controller="MainCtrl" ng-click="closePopup()">
  <button ng-click="openPopup($event)" id="clicktarget">Click</button>
  <p>Hello {{name}}!</p>

  <div ng-include="getPopup()" ng-click="$event.stopPropagation()">  
  </div>

  <script type="text/ng-template" id="theTemplate.html">
    <div ng-controller="PopupController">
      <div ng-include="'LayerPopup.html'"></div>
    </div>
  </script>
</body>

<强> JS

angular.module('plunker', [])
.controller('MainCtrl', function($scope, $templateCache) {
  $scope.name = 'World';
  $scope.popupTmpl = null;
  $scope.openPopup = function($event){
    $scope.popupTmpl = 'theTemplate.html';
    $event.stopPropagation();
  };
  $scope.getPopup = function(){
    return $scope.popupTmpl;
  };
  $scope.closePopup = function(){
    $scope.popupTmpl = null;
  };
})
.controller('PopupController', ['$scope', function($scope) {
  $scope.aVariableMaybe = 'lulz something';
}]);

在旁注中，尝试在使用Angular时摆脱那些JQuery的东西。 Angular可以自己做所有事情

AngularJS：为动态内容创建新的控制器和范围

2 个答案: