编译嵌入模板

Question

<div overlay config="overlayConfig">
    <div class="dismiss-buttons">
        <button class="btn btn-default" ng-click="subscriptions()">Save</button>
    </div>
</div>

app.directive("Overlay", ["$timeout", "$compile", function($timeout, $compile) {
    return {
        restrict: "A",
        transclude: true,
        scope: {
            config: "="
        },
        template: "<div class='overlay'><div ng-transclude></div></div>",
        link: function(scope, iElement, iAttrs, ctrl, transclude) {
            iElement = iElement.find(".ehn-overlay");
            $(document.body).append(iElement);


            scope.$watchCollection("config", function(value) {
                if (scope.config.isVisible === false) {
                    iElement.remove();
                } else {
                    $(document.body).append(iElement);
                }

            });

        }

    };
}]);

我需要将叠加层附加到正文中，完成后将其移除。它是第一次工作，但下次我追加时它不会触发 ng-click，所以我假设它没有被编译。有人可以在这里给出解决方案吗？

Answer 1

我试图重现你的问题，但我不能。这里是 working Plunker.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';

  $scope.config = {
    isVisible: false
  };

  $scope.do = function() {
    $scope.config.isVisible = true;
    $timeout(function() { 
      $scope.config.isVisible = false;
    }, 2000);
  };
});

app.directive("overlay", ["$timeout", "$compile", function($timeout, $compile) {
    return {
        restrict: "A",
        transclude: true,
        scope: {
            config: "="
        },
        template: "<div><div ng-transclude></div></div>",
        link: function(scope, iElement, iAttrs, ctrl, transclude) {
            iElement = iElement.find(".overlay");
            $(document.body).append(iElement);

            scope.$watchCollection("config", function(value) {
                if (scope.config.isVisible === false) {
                    iElement.remove();
                } else {
                    $(document.body).append(iElement);
                }

            });

        }

    };
}]);

查看：

<div overlay config="config">
      <div class="overlay"></div>
      <div class="dismiss-buttons">
        <button class="btn btn-default" ng-click="do()">Save</button>
      </div>
    </div>

几点说明：

不要将 jQuery 与 AngularJs 混合使用 - 这会导致无法测试代码（以及其他一些问题）
有许多专门为 angularjs 创建的叠加层，使用其中之一是个好主意（除非你正在学习 angularjs）

这是 Plunker 中的另一个叠加层，更 angular 方式。

编译嵌入模板

Compiling transclusion templates

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-transclude