Angular.js: svg तत्वों के लिए स्टार्टअप पर "विशेषता के लिए अमान्य मान" त्रुटियां

को निर्मित 13 जून 2012 · 14टिप्पणियाँ · स्रोत: angular/angular.js

क्रोम संस्करण "20.0.1132.27 बीटा" का उपयोग करना (लेकिन अन्य संस्करणों पर भी देखा जाता है)

इस एचटीएमएल के लिए (जाहिर है यह मूल से सरलीकृत है):

<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc12.min.js"></script>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect x="{{0}}" y="{{0}}" width="{{100}}" height="{{100}}" fill="red"/>
    </svg>
  </body>
</html>

यह अपेक्षित आयत खींचता है, लेकिन जब मैं जावास्क्रिप्ट कंसोल में देखता हूं तो मैं देखता हूं:

त्रुटि: के लिए अमान्य मानविशेषता x="{{0}}" बग। एचटीएमएल:7
त्रुटि: के लिए अमान्य मानविशेषता y="{{0}}" बग. एचटीएमएल:7
त्रुटि: के लिए अमान्य मानविशेषता चौड़ाई = "{{100}}" बग। एचटीएमएल:7
त्रुटि: के लिए अमान्य मानविशेषता ऊंचाई = "{{100}}" बग। एचटीएमएल:7

जो स्पष्ट रूप से मूल्यों के मूल्यांकन से पहले आते हैं। वे हानिरहित लगते हैं, लेकिन ध्यान भंग कर रहे हैं (एनजी-रिपीट के कारण वास्तविक कोड कुछ हज़ार ऐसी त्रुटियां उत्पन्न करता है - http://dave.whipp.name/tutorial/anti-alias.html देखें)।

स्रोत

dwhipp

सबसे उपयोगी टिप्पणी

दरअसल, इन दिनों (AngularJS 1.5) आप अपनी विशेषताओं को "ng-attr-" के साथ जोड़ते हैं, इसलिए:

<rect x="{{0}}" y="{{0}}" fill="red"/>

बन जाएगा:

<rect ng-attr-x="{{0}}" ng-attr-y="{{0}}" fill="red"/>

peterjhart 23 अग॰ 2016

👍27 🎉2 ❤1 😕1

सभी 14 टिप्पणियाँ

क्या इस त्रुटि को दूर करने के लिए कोई निर्देश या कोई अन्य कोणीय तकनीक है? एनजी-क्लोक पर्याप्त नहीं है।

geelen 8 सित॰ 2012

अफसोस की बात है कि मैं इसी मुद्दे में भाग गया हूं। संभवतः क्रोम एसवीजी का "मूल्यांकन" कर रहा है, इससे पहले कि एंगुलरजेएस के पास डोम के साथ जाने और गड़बड़ करने का मौका हो? (और एंगुलर की मदद से स्ट्रिंग "<[ 100+v.row*100 ]>" का मूल्यांकन किसी संख्या तक सही ढंग से नहीं किया जा सकता है)।

mtiller 24 सित॰ 2012

मेरी भी यही समस्या थी। अंत में, मैंने अपने निर्देश लिखने का फैसला किया:

angular.module('yourmodule.directives', [])
    .directive('ngX', function() {
        return function(scope, element, attrs) {
            scope.$watch(attrs.ngX, function(value) {
                element.attr('x', value);
            });
        };
    })

फिर, का उपयोग ng-x के बजाय विशेषता x :

<circle ng-x="{{ x }}" y="0" r="5"></circle>

अंत में कष्टप्रद त्रुटि संदेशों से छुटकारा मिल गया।

vsirisanthana 21 अक्तू॰ 2012

यह एक बेहतरीन उपाय है। मुझे इसे आज़माना है। हालांकि, मुझे आश्चर्य है कि क्या मुझे प्रभावित होने वाली सभी विशेषताओं के लिए निर्देशों का एक पूरा समूह बनाना होगा।

धन्यवाद।

mtiller 21 अक्तू॰ 2012

इसी तरह ngHref और ngSrc के लिए आप कर सकते हैं

angular.forEach(['x', 'y', 'width', 'height'], function(name) {
  var ngName = 'ng' + name[0].toUpperCase() + name.slice(1);
  myModule.directive(ngName, function() {
    return function(scope, element, attrs) {
      attrs.$observe(ngName, function(value) {
        attrs.$set(name, value); 
      })
    };
  });
});

rkirov 22 अक्तू॰ 2012

@mtiller मुझे ऐसा लगता है। मुझे सभी विशेषताओं के लिए निर्देशों का एक पूरा समूह भी बनाना था। लेकिन, जैसा कि @rkirov ने सुझाव दिया है, आप ऐसा करने के लिए लूप का उपयोग कर सकते हैं।

@rkirov मैंने कभी भी

vsirisanthana 22 अक्तू॰ 2012

उस स्निपेट को साझा करने के लिए धन्यवाद, @rkirov , सुपर सहायक! हालांकि अजीब समस्या: यदि आप इसे "डी" विशेषताओं के लिए भी उपयोग करते हैं, और मान को खाली स्ट्रिंग पर सेट करने का प्रयास करते हैं, जिसके परिणामस्वरूप elem.setAttribute("d", "") जहां elem एक path तत्व है , क्रोम त्रुटि कंसोल में Error: Problem parsing d="" । लेकिन http://www.w3.org/TR/SVGTiny12/paths.html#DAttribute के अनुसार d="" पूरी तरह से मान्य है, और यह पथ के प्रतिपादन को अक्षम करने का तरीका है, जिसकी आपको कभी-कभी आवश्यकता होती है। किसी को पता है कि यहाँ क्या हो रहा है? क्या यह वेबकिट बग है?

lanterndev 23 फ़र॰ 2013

क्या यह वेबकिट बग है?

हाँ ।

lanterndev 24 फ़र॰ 2013

ऐसा लगता है #1925 इस मुद्दे का एक डुप्लिकेट है। मैंने इसे नोटिस नहीं किया, क्षमा करें।

एक लंबित पीआर (https://github.com/angular/angular.js/pull/2061) है जो इसे उन विशेषताओं पर उपसर्गों का उपयोग करके हल करता है जिन्हें देर से बाध्यकारी की आवश्यकता होती है।

दुर्भाग्य से, जैसा कि @skivvies ने बताया, d="" बारे में समस्या एक वेबकिट बग है ...

lrlopez 24 फ़र॰ 2013

बढ़िया उपाय विसिरिसंथान। विशेषता 'डी' पर एक ही कारण के लिए एक रेखा खींचते समय मुझे एक ही त्रुटि "अपेक्षित मूवटो पथ कमांड ('एम' या 'एम') कोणीय" हो रही थी।

angular.module('yourmodule.directives', [])
.directive('ngD', function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.ngD, function (value) {
            element.attr('d', value);
        });
    };
});

बहुत धन्यवाद

elenadelvallematute 16 मई 2016

दरअसल, इन दिनों (AngularJS 1.5) आप अपनी विशेषताओं को "ng-attr-" के साथ जोड़ते हैं, इसलिए:

<rect x="{{0}}" y="{{0}}" fill="red"/>

बन जाएगा:

<rect ng-attr-x="{{0}}" ng-attr-y="{{0}}" fill="red"/>

peterjhart 23 अग॰ 2016

👍27 🎉2 ❤1 😕1

समस्या के बारे में

त्रुटि: के लिए अमान्य मानविशेषता x1="{{viewBox.x1}}"त्रुटि: के लिए अमान्य मानविशेषता y1="{{viewBox.y1}}"

आप X1 और y1 को ng-attr-x1 और ng-attr-y1

ngAttr का उपयोग करते समय, $interpolate के allOrNothing ध्वज का उपयोग किया जाता है, इसलिए यदि इंटरपोलेटेड स्ट्रिंग में कोई भी अभिव्यक्ति अपरिभाषित में परिणाम देती है, तो विशेषता हटा दी जाती है और तत्व में नहीं जोड़ा जाता है

Berg-it 16 अक्तू॰ 2016

यह d को ng-attr-d . से बदलने के साथ काम कर रहा है

AB-INS 22 जन॰ 2018

धन्यवाद पीटरझार्ट, यह काम किया। मैं सोच रहा था कि क्या यह काम करेगा यदि मैंने एक लिंक फ़ंक्शन बनाया और फिर घटक को $onInit के माध्यम से संसाधित किया।

bthornemail 30 अग॰ 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular.js: svg तत्वों के लिए स्टार्टअप पर "विशेषता के लिए अमान्य मान" त्रुटियां

सबसे उपयोगी टिप्पणी

सभी 14 टिप्पणियाँ

संबंधित मुद्दों