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

在此示例中，错误出现在控制台中： Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505在浏览器控制台中查看此错误（我使用最后一个稳定的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？如何解决错误？

这是因为对某些属性有效的值有限制。这就是为什么Angular具有ngAttr（文档）的原因。您需要这样更改代码：

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

相关内容

最新更新

热门标签：