Question

BaseView.html

<div id='baseViewConent'>
    <span>some content</span>
    <div id='someWhere'></div>
    <span>some other content</span>
</div>

SomeView.html

<div id='someViewContent'>
    <button id='button2'>button2</button>
</div>

我在someView中包含了baseView：

<div ng-include="'BaseView.html'"></div>
<div id='someViewContent'>
    <button id='button2'>button2</button>
</div>

变成：

<div id='baseViewcontent'>
    <span>some content</span>
    <div id='someWhere'></div>
    <span>some other content</span>
</div>
<div id='someViewContent'>
    <button id='button2'>button2</button>
</div>

但我想：在BaseView.html

中将someViewContent插入someWhere

<div id='baseViewcontent'>
    <span>some content</span>
    <div id='someWhere'><!--between here!-->
        <div id='someViewContent'>
            <button id='button2'>button2</button>
        </div>
    </div><!--and here-->
    <span>some other content</span>
</div>

怎么做？

我可以从这个Q&A得到一些想法但无法弄清楚。

注意：我不想将SomeView.html纳入BaseView.html，因为BaseView.html多次使用

我的意思是：

SomeOtherView.html

<div id='someOtherViewContent'>
    <button id='button3'>button3</button>
</div>

在所需的操作之后，它将成为：

<div id='baseViewcontent'>
    <span>some content</span>
    <div id='someWhere'>
        <div id='someOtherViewContent'>
            <button id='button3'>button3</button>
        </div>
    </div>
    <span>some other content</span>
</div>

Answer 1

您应该使用transclude指令。在这里查看transclude文档： https://docs.angularjs.org/guide/directive

angular.module('test').directive('baseView', function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '\
            <div id="baseViewConent">\
                <span>some content</span>\
                <div id="someWhere" ng-transclude></div>\
                <span>some other content</span>\
            </div>\
        ' 
    }
});

在html中使用：

<base-view>
    <div id='someViewContent'>
        <button id='button2'>button2</button>
    </div>
</base-view>

呈现为：

<div id='baseViewcontent'>
    <span>some content</span>
    <div id='someWhere'>
        <div id='someOtherViewContent'>
            <button id='button3'>button3</button>
        </div>
    </div>
    <span>some other content</span>
</div>

在进行ng-include时，如何将html插入到包含的视图中？

1 个答案: