在脚本中再添加一个角度模型窗口

Question

我刚刚开始使用我从另一个人那里获得的剧本中的angular.js库。 .html文件中有一个链接，用于打开模型窗口。所以，HTML如下：

＆＃13;

＆＃13;

<div class="shape ng-scope" data-name="polygon" ng-repeat="shape in shapes.available" ng-click="shapes.addToCanvas(shape)" tabindex="0">
                            <div class="shape-image" id="polygon"><div class="css-shape"></div></div>
                            <div class="shape-name ng-binding">How to draw a polygon?</div>
                        </div>

<script type="text/ng-template" id="modals/polygon.html">
                <md-dialog class="md-modal">
                    <div class="md-modal-header">
                        <h1>How to draw a polygon?</h1>
                        <div ng-click="closeModal()" class="md-close-modal"><i class="mdi mdi-close"></i></div>
                    </div>

                    <ol>
                        <li>Step 1. ... ... </li>
                        <li>Step 2. ... ... </li>
                        <li>Step 3. ... ... </li>
                        <li>Step 4. ... ... </li>
                        <li>Step 5. ... ... </li>
                    </ol>

                    <div class="buttons">
                        <md-button class="md-primary md-raised" ng-click="closeModal()">OK</md-button>
                    </div>
                </md-dialog>
        </script>

＆＃13;

＆＃13;

＆＃13;

打开窗口的JS文件如下：

＆＃13;

＆＃13;

angular.module('image.shapes')

.service('polygon', ['$rootScope', '$mdDialog', 'canvas', function ($rootScope, $mdDialog, canvas) {

    var self = {

        mode: 'add',
        currentShape: false,

        onMouseMove: function(event) {
            var pos = canvas.fabric.getPointer(event.e);
            if (self.mode === "edit" && self.currentShape) {
                var points = self.currentShape.get("points");
                points[points.length - 1].x = pos.x - self.currentShape.get("left");
                points[points.length - 1].y = pos.y - self.currentShape.get("top");
                self.currentShape.set({
                    points: points
                });
                canvas.fabric.renderAll();
            }
        },

        onMouseDown: function(event) {
            var pos = canvas.fabric.getPointer(event.e);

            if (self.mode === "add") {
                var poly = new fabric.Polygon([{
                    x: pos.x,
                    y: pos.y
                }, {
                    x: pos.x + 0.5,
                    y: pos.y + 0.5
                }], {
                    fill: 'black',
                    opacity: 1,
                    selectable: false
                });
                self.currentShape = poly;
                self.currentShape.name = 'polygon';
                canvas.fabric.add(self.currentShape);
                self.mode = "edit";
            } else if (self.mode === "edit" && self.currentShape && self.currentShape.type === "polygon") {
                var points = self.currentShape.get("points");
                points.push({
                    x: pos.x - self.currentShape.get("left"),
                    y: pos.y - self.currentShape.get("top")
                });
                self.currentShape.set({
                    points: points
                });
                canvas.fabric.renderAll();
            }
        },

        onEscape: function(e) {
            if ((!e && self.currentShape) || e && e.keyCode === 27) {
                if (self.mode === 'edit' || self.mode === 'add') {
                    self.mode = 'normal';
                    self.currentShape.set({
                        selectable: true
                    });

                    self.currentShape._calcDimensions();
                    self.currentShape.setCoords();

                    canvas.fabric.setActiveObject(self.currentShape);
                    canvas.fabric.renderAll();
                } else {
                    self.mode = 'add';
                }

                self.currentShape = null;
            }
        },

        onClick: function(e) {
            var clickedInModal = $(e.target).closest('.md-dialog-container')[0];

            if (e.target.nodeName !== 'CANVAS' && $(e.target).closest('.shape').data('name') !== 'polygon' && !clickedInModal) {
                self.disable();
            }
        },

        enable: function() {
            if (this.enabled) return;

            this.enabled = true;
            canvas.fabric.on('mouse:move', self.onMouseMove);
            canvas.fabric.on('mouse:down', self.onMouseDown);
            fabric.util.addListener(window, 'keyup', self.onEscape);

            setTimeout(function() {
                fabric.util.addListener(window, 'click', self.onClick);
            }, 20);

            $mdDialog.show({
                templateUrl: 'modals/polygon.html',
                clickOutsideToClose: true,
                controller: ['$scope', '$mdDialog', function($scope, $mdDialog) {
                    $scope.closeModal = $mdDialog.hide;
                }]
            });
        },

        disable: function() {
            this.enabled = false;
            canvas.fabric.off('mouse:move', self.onMouseMove);
            canvas.fabric.off('mouse:down', self.onMouseDown);
            fabric.util.removeListener(window, 'keyup', self.onEscape);
            fabric.util.removeListener(window, 'click', self.onClick);
            self.onEscape();
        }
    };

    return self;

}]);

＆＃13;

＆＃13;

＆＃13;

我需要做的是再添加一个链接＆＃34;如何绘制三角形？＆＃34;并使它打开另一个相同结构的模型窗口（它将仅在其内容中与第一个不同）。我应该在html和js文件中做些什么改变？