个人中心
gpt4 book ai didi

javascript - d3和angularjs ng路线svg在更改路线后不会被破坏

转载 作者：行者123 更新时间：2023-11-27 23:53:41 25 4
gpt4 key购买 nike

我有使用 ng-route 的 2 条路线的 Angular 程序。在名为“this”的一条路线上，我有一些文本，在名为“that”的第二条路线上，我有一些文本和一个 d3 指令。该指令生成 svg 并显示更多文本。

显示了 plunkr 示例 here

问题是，当我从“那个”链接切换回这个“链接”时，svg 仍然保留，而且，如果我再次单击“那个”链接，我会得到另一个 svg，这样我就会有 2 个 svg，而不是只有一个。如果我继续点击这个，我会得到越来越多的 svgs。

我想要的是，当我从“那个”链接切换回“这个”链接时，我希望 svg 消失。

在单击“链接”后，单击“此”链接时如何使 svg 消失？

下面是我的代码:

<!-- Index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Route Problem</title>
</head>
<body ng-app="myApp">

    <ng-view></ng-view>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

'use strict'

angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/this', {
        templateUrl: 'partials/this.html', 
        controller: 'ThisCtrl'
    })
    .when('/that', {
        templateUrl: 'partials/that.html',
        controller: 'ThatCtrl'
    })
    .otherwise({ redirectTo: '/this'});
}])
.controller('ThisCtrl', ['$scope',
    function($scope) {}])
.controller('ThatCtrl', ['$scope', 
    function($scope) {}])
.directive('textSvg', function () {
    return {
        restrict:'E',
        link: function(scope, element, attrs) {
            var svg = d3.select('body').append('svg').attr({
                width: 500,
                height: 200
            });
            svg.append('text').attr({
                x: 50,
                y: 50
            }).text('A simple message for testing');
        }
    }
})

这个.html

<ul class="menu">
    <li><a href="#/this">This</a></li>
    <li><a href="#/that">That</a></li>
</ul>
<p>This is the route called this<p>

那个.html

<p>This is the route called that.</p>
<text-svg></text-svg>

最佳答案

不要将 svg 附加到正文，而是将其附加到指令“text-svg”

var svg = d3.select('text-svg').append('svg').attr({

关于javascript - d3和angularjs ng路线svg在更改路线后不会被破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32455931/

25 4 0
文章推荐： html - 当页面缩小时，div 文本没有像我想要的那样 float
文章推荐： html - 为什么它在悬停时闪烁？
文章推荐： css - 我可以合并 :nth-child() or :nth-of-type() with an arbitrary selector?
文章推荐： javascript - 分配 ID/名称属性以唯一标识绘制的多边形
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com