javascript - 编译嵌入模板

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

我试图重现你的问题，但我不能。这是工作 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>

几点说明：

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

这是Plunker中的另一个叠加层，有点角度。