在组件模板中使用 SVG 时出错

Question

在这个例子中，错误出现在控制台中：Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505 在浏览器控制台看到这个错误（我用的是 last stable Chrome）。 SVG 显示正确。

'use strict';

var MyExampleTemplate = {
    template:   '<svg width="200" height="180">' +
                    '<path stroke="orange" stroke-width="10" fill="gold" ' +
                        'd="M 100,{{$ctrl.test}} L 180,160 ' +
                        'L 20,160 z"/>' +
                '</svg>',
    controller: MyExampleController
};

function MyExampleController() {
    var vm = this;

    vm.test = 0;
    vm.$onInit = init;
    console.log('Ctrl: %s', vm.test);

    function init() {
        vm.test = 20;
        console.log('Init: %s', vm.test);
    }
}

angular
    .module('app', [])
    .component('myExample', MyExampleTemplate);

<body ng-app="app">
    <my-example></my-example>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
</body>

在这个例子中，我试图改变另一个属性。没有错误。 SVG 也能正确显示。

'use strict';

var MyExampleTemplate = {
    template:   '<svg width="200" height="180">' +
                    '<path stroke="orange" stroke-width="{{$ctrl.test}}0" fill="gold" ' +
                        'd="M 100,20 L 180,160 ' +
                        'L 20,160 z"/>' +
                '</svg>',
    controller: MyExampleController
};

function MyExampleController() {
    var vm = this;

    vm.test = 0;
    vm.$onInit = init;
    console.log('Ctrl: %s', vm.test);

    function init() {
        vm.test = 1;
        console.log('Init: %s', vm.test);
    }
}

angular
    .module('app', [])
    .component('myExample', MyExampleTemplate);

<body ng-app="app">
    <my-example></my-example>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
</body>

这是一个错误还是我不能以这种方式使用 SVG？我该如何修复错误？

Answer 1

这是因为对某些属性有效的值有限制。这就是 Angular 有 ngAttr (docs) 的原因。您需要像这样更改您的代码：

<path ... ng-attr-d="M 100,{{$ctrl.test}} L 180,160 L 20,160 z" />

在组件模板中使用 SVG 时出错

Error when using SVG in the component template

javascript

svg

angularjs

angularjs-components