While doing ng-include, how can I insert html into included view?

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>

I include baseView in SomeView:

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

It becomes:

<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>

But I want: insert someViewContent into someWhere in BaseView.html

<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>

How will it be done?

I could have some idea from this Q&A but can't figure out.

Note: I don't want to include SomeView.html into BaseView.html because BaseView.html used multiple times

I mean:

SomeOtherView.html

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

after desired operation, it would become:

<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

You should use a transclude directive. Check the transclude documentation here: 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>\
        ' 
    }
});

Use in html as:

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

Renders as :

<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>