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

Posted 2023-02-19

【中文标题】附加到元素父级的模板上的隔离范围

【英文标题】：Isolated scope on template appended to element parent

【发布时间】：2018-06-22 02:15:10

【问题描述】：

我有以下指令：

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 标记之外。

我的问题是，如何将指令的隔离范围应用于附加到父元素的模板？

【参考方案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！

【讨论】：

感谢您的回答！它运作良好，但它迫使我将原始 HTML 标记包装到具有指令属性的 div 中。不是很重要，但我想要一个不那么侵入性的指令。实际上，我设法通过在element.parent() 上应用$compile() 方法而不是element 来解决我的问题。我不知道这是否是正确的方法，但它似乎有效。