model 弹出框放到一个html中

弹出样式：

样式：

pre-exam-index.html

<!--既往史，要以弹框形式显示-->
<div class=" pull-right">
　　<button class="btn btn-primary" ng-click="openHistory()">既往史</button>
</div>
<!--既往史管理-->
<div ng-controller="PreExamHistoryController" id="preHistoryDiv" class="past-history-index"
              ng-include src="'../templates/pre-exam-history-template.html'"></div>

<!--pre-exam-history-template.html 紫色html即为既往史model 下面就是pre-exam-history-template.html-->

pre-exam-index.html 对应的js

 //既往史按钮点击弹出弹框，
$scope.openHistory=function(){
　　angular.element('#preHistoryDiv').scope().openHis();
};

pre-exam-history-template.html

<div hr-draggable modal="previousHistoryModalFlag" close="closeHistoryModal()" options="previousHistoryModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" ng-click="closeHistoryModal()" aria-hidden="true">×
        </button>
        <h5>既往史</h5>
    </div>
    <div class="modal-body past-history-index margin5">
        <!--//内容-->
        <section  class="half-width">
        </section>
    </div>
</div>

pre-exam-history-template.html 对应的js

$scope.openHis=function(){
　　$scope.previousHistoryModalFlag=true;
};

橙色标注的angular指令

hr-draggable

/**
 *使元素可拖动
 */
angular.module('hr.directives').directive('hrDraggable', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (attr["modal"] !== undefined) {
                scope.$watch(attr["modal"], function (newValue) {
                    if (newValue) {
                        setTimeout(function () {
                            $(".modal").draggable({handle: ".modal-header"});
                        }, 100);
                    } else {
                        $(".modal").attr("style", "");
                    }
                }, true);
                $(window).resize(function () {
                    $(".modal").attr("style", "");
                });
            } else {
                element.draggable($parse(attr["hrDraggable"])(scope));
            }
        }
    };
}]);

model  <--ui-bootstrap-tpls.js

angular.module('ui.bootstrap.modal', ['ui.bootstrap.dialog'])
    .directive('modal', ['$parse', '$dialog', function($parse, $dialog) {
        return {
            restrict: 'EA',
            terminal: true,
            link: function(scope, elm, attrs) {
                var opts = angular.extend({}, scope.$eval(attrs.uiOptions || attrs.bsOptions || attrs.options));
                var shownExpr = attrs.modal || attrs.show;
                var setClosed;

                // Create a dialog with the template as the contents of the directive
                // Add the current scope as the resolve in order to make the directive scope as a dialog controller scope
                opts = angular.extend(opts, {
                    template: elm.html(),
                    resolve: { $scope: function() { return scope; } }
                });
                var dialog = $dialog.dialog(opts);

                elm.remove();

                if (attrs.close) {
                    setClosed = function() {
                        $parse(attrs.close)(scope);
                    };
                } else {
                    setClosed = function() {
                        if (angular.isFunction($parse(shownExpr).assign)) {
                            $parse(shownExpr).assign(scope, false);
                        }
                    };
                }

                scope.$watch(shownExpr, function(isShown, oldShown) {
                    if (isShown) {
                        dialog.open().then(function(){
                            setClosed();
                        });
                    } else {
                        //Make sure it is not opened
                        if (dialog.isOpen()){
                            dialog.close();
                        }
                    }
                });
            }
        };
    }]);