1

this one、this one、this one、this one 、this oneなど、さまざまな同様の質問を調べましたが、自分で解決策を見つける前に、問題の解決策を提供できませんでした。しかし、それでも「正しい」Angular の方法とは思えないので、コミュニティにアドバイスを求めています。

これがセットアップです。レイアウト テンプレート (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);
                });
            }
        };
    });

SVGコンテンツがDOMに追加された後にdiagram.process()関数を実行できる唯一の方法は、示されているようにelement.html()で$watchを使用することでした。これは私にとって「間違っている」と感じているものであり、もっと「正しい」方法があるかどうか知りたい.

4

0 に答える 0