Question

我有一个html页面，弹出一个带有.svg文件的模态对话框。

静态内容文件夹中的svg文件（现在）。

我想在内存中加载svg文件，在内存编辑中执行一些操作，然后将其动态添加到弹出页面中。

如何使用AngularJS（使用{{}}并在控制器中填充/操作）来完成？

Answer 1

修正了它。使用AngularJS UI，有一个很好的基本模板来显示模态对话框（参见http://angular-ui.github.io/bootstrap中的模态部分）。

我必须做的一个修复，就是调用$ scope。$ apply来显示动态注入的html。

HTML：

<div ng-repeat='process in myProcesses.ProcessInstances.ProcessInstance'>
    <div class="myprocesses-row-wrapper">
        <div class="myprocesses-row">
            <div class="myprocesses-process-title">{{process.id}}</div>
            <div class="myprocesses-process-startedby">
                Started by: (dummy)
                <button class="btn pull-right" ng-click="open(process)">Show diagram</button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<!--modal dialog to show the svg -->
<div modal="shouldBeOpen" close="close()" options="opts">
    <div class="modal-header">
        <h3>Process diagram</h3>
    </div>
    <div class="modal-body">
        <div compile="svgData"></div> <!--custom compile directive, to inject html directly-->
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning cancel" ng-click="close()">Close</button>
    </div>
</div>

和JS：

'use strict';

    app.controller('MyProcessesController',
        function MyProcessesController($scope, $rootScope, $log, myService) {
            $rootScope.contentTitle = "My processes";
            $scope.myProcesses = myService.getMyProcesses();

            $scope.open = function (process) {
                //TODO: temp hack to load the svg, because current service does not give us the svg yet
                $('<div>').load("/Content/svg/svgexample.svg", function (data) {
                    $scope.svgData = data;
                    $scope.shouldBeOpen = true;
                    $scope.$apply(); // this is neccessary to show the dialog immediately
                });
            };

            $scope.close = function () {
                $scope.shouldBeOpen = false;
            };

            $scope.opts = {
                backdropFade: true,
                dialogFade: true
            };
        });

在AngularJS中动态添加svg，操作并添加到DOM

1 个答案: