Question

是否可以隐藏我的指令html元素？我的意思是如果我有这个指令：

app.js

angular.module("myApp", [])
    .directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>"
    }
);

仅渲染模板的内容。

<div>
    <p>Some text...</p>
</div>

不是指令元素：

<my-directive>
    <div>
        <p>Some text...</p>
    </div>
</my-directive>

Answer 1

是的，只需将replace: true放在指令中即可。它将删除元素

angular.module("myApp", [])
    .directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>",
            replace: true
    }
);

演示

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){


}).directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>",
            replace : true
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <my-directive> 
</my-directive>
</div>

＆＃13;

Answer 2

请注意替换：true 被标记为已弃用（我不时会自己使用它）

请参阅：Explain replace=true in Angular Directives (Deprecated)

如何避免渲染指令元素

2 个答案: