Question

我查看了各种类似的问题，例如this one，this one，this one，this one和this one未能解决我的问题在自己尝试解决方案之前。然而，它仍然不像'＃14;正确＆＃34;角度方式，所以我向社区征求意见。

这是设置。我有一个布局模板（index.html）：

<!DOCTYPE html>
<html ng-app="app">    
<head>
    ...
</head>
<body role="document">
    <div id="wrapper" class="container" role="main" ng-controller="mainController">

        <div id="header">
            ...
        </div>

        <div id="diagram" ng-view="ng-view"></div>

        <div id="footer>
            ...
        </div>

        <script>
            ...
        </script>

    </div>
</body>
</html>

我有一个部分视图模板（diagram.html）。请注意自定义指令，如下所述：

<div my-diagram ng-bind-html="diagram"></div>

这是我的路由配置，指定了部分视图模板和控制器：

angular.module("app", ["ngRoute", "ngSanitize", "controllers", "directives"])
    .config(["$routeProvider",
        function ($routeProvider) {
            $routeProvider
                .when("/process/:processId", {
                    templateUrl: "diagram.html",
                    controller: "processDiagramController"
                });

        }]);

这是用于局部视图的控制器。它使用$ routeParams中的processId值通过$ http.get（）进行调用，以检索它分配给$ scope.diagram的SVG数据，该范围绑定到模板：

angular.module("controllers")
    .controller("processDiagramController", ["$scope", "$http", "$routeParams", "$sce",
        function ($scope, $http, $routeParams, $sce) {

            var onError = function (response) {
                $scope.errors.push(response.data);
            }

            var onDiagram = function (response) {
                $scope.diagram = $sce.trustAsHtml(response.data);
            }

            $scope.errors = [];

            $http.get("/" + $routeParams.processId + ".svg").then(onDiagram, onError);

        }
    ]);

我的问题是弄清楚如何在SVG内容添加到DOM后运行代码。当然，在Angular中进行任何DOM操作的正确位置是在一个指令中，所以我写了一个：

angular.module("directives", [])
    .directive("myDiagram", function () {
        return {
            link: function(scope, element, attrs) {
                scope.$watch(function() {
                    return element.html();
                },
                function () {
                    diagram.process(element);
                });
            }
        };
    });

我可以让SV.内容添加到DOM后运行的diagram.process（）函数的唯一方法就是在element.html（）上使用$ watch，如图所示。这就是感觉＆＃34;错误＆＃34;对我来说，我想知道是否还有更多正确的＆＃34;方式。

在Angular通过$ http检索内容并将其添加到部分视图模板后操作DOM

0 个答案: