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

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

几点说明:

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

这是 Plunker 中的另一个叠加层, 更棱 Angular 分明的方式。