0
이 예에서는 콘솔에 오류가 표시됩니다. Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505 브라우저 콘솔에서이 오류를 참조하십시오 (안정적인 Chrome을 사용합니다). SVG가 올바르게 표시됩니다. 이 예에서 구성 요소 템플릿에서 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>'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를 사용할 수 없습니다? 오류를 수정하려면 어떻게합니까?