0
在這個例子中使用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？我該如何解決這個錯誤？