Question

我有以下指令：

app.directive("mydirective", ['$compile', function($compile) {
    function link(scope, element, attrs, ctrl, $transclude) {
        var actionBtnHTML = `<button type="submit" ng-show="show"></button>`;

        element.parent().append(actionBtnHTML);

        $compile(element)(scope);
    }

    return {
        restrict: 'A',
        scope: {},
        link: link,
        controller: ['$scope', function MyDirectiveController($scope) {
            $scope.show = true;
        }]
}]);

我的指令只是在带有mydirective属性的HTML标记后添加一个按钮。

我希望添加的HTML与指令具有相同的范围（即新的隔离范围）。但在这种配置中并非如此。我想这是因为添加的HTML在指令HTML标记之外。

从那时我的问题是，如何在附加到父元素的模板上应用我的指令的隔离范围？

Answer 1

您可以使用ngTransclude插入额外的HTML内容，同时保持指令的相同范围。

directive("mydirective", ['$compile', function($compile) {

  return {
    restrict: 'A',
    scope: {},
    controller: ['$scope', function MyDirectiveController($scope) {
      $scope.show = true;
    }],
    transclude: true,
    template: '<ng-transclude></ng-transclude>' +
      ' <button type="submit" ng-show="show">Submit!</button>'
  }
}])

这是指令的demo fiddle！

附加到元素父级的模板上的隔离范围

1 个答案: