Angularstrap - modal box

Question

I am using rails to build my app. Tried to popup a modal box with angularstrap http://mgcrea.github.io/angular-strap/#/modal they are giving example of using modal box with partials.But I want to call a div from same page.they mention something with ng-template.But I didn't get any documentation for that. Anybody know about this??

Answer 1

You can read about ng-template here in the AngularJS docs. Implement it as follows:

<script type="text/ng-template" id="modal-template.html">
     <div>Content of Modal</div>
</script>

Then where you're calling the modal, replace the reference to the partial with modal-template.html:

<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>

Answer 2

In the main html page define your TemplageCache as follows:

<script type="text/ng-template" class="modal" id="/myTmpl.html">
    <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close" ng-click="$hide()">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">This title</h4>
                </div>
                <div class="modal-body">
                  This is content
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
                </div>
            </div>
        </div>
    </div>
</script>

Then in javascript

$scope.showMyModal=function(){
    var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}

Answer 3

An ng-template would be if you had a inline (html string in javascript) variable. For example:

var t = "<div></div>";

t could be your ng-template.

Unforunately I don't know how to do what you are looking for.