jquery - 在 AngularJS 中动态添加 svg、操作和添加到 DOM

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
            };
        });