通过URL获取svg数据的Angular指令

Angular Directive for svg data through URL

本文关键字：Angular 指令 数据 svg URL 获取 通过      更新时间：2023-09-26

我想创建一个角指令，我可以得到svg数据。现在我有下面的指令——(下面的一个工作正常)

    svgData.directive('myMap', function($http) {
        console.log("In directive");
        return {
            restrict: 'EAC',         
            templateUrl: 'path_name/myMap.tmpl.html',
            replace: true,
            scope: {                
                data: '='            
            },
            link: function(scope, element, attrs) {                                                                   
                  console.log(scope, element, attrs);                    
            }
        };
    });

在myMap.tmpl.html中，我可以按照以下方式导入svg文件——

<embed type="image/svg+xml" src="http://localhost:8080/data/svg/myMap.svg"></embed>

在服务器端——文件

的路由
 app.get(api + '/data/svg/:fileName', mySvg.getSVGData);

 this.getSVGData = function(req, res) {
    var fs = require('fs')
     , filename = 'path_name'+req.params.fileName;
     console.log('Getting file', filename);
     res.writeHead(200, {"Content-Type":"image/svg+xml"});
     fs.readFile(filename, "utf8", function(err, data) {
      if (err) {
        console.log(err);
        throw err;
        }
        res.write(data);
        console.log(data);  
        res.send(filename);        
    res.end();
    });             
}

现在我不想在模板中直接给出url。我想写src={{scope}}或<my-map src="{{scope}}"></my-map>

任何建议。

我打算推荐使用ng-src来做你想要的，但显然有一个问题，嵌入不能正确更新。

看看上一篇文章:https://github.com/angular/angular.js/issues/339

他的指示将允许你做你想做的事。只需在模板中使用它，并将{{url}}替换为包含url的作用域变量。 
<embed embed-src="{{url}}" type="image/svg+xml"></embed>
相关文章：