कोणीय - गतिशील रूप से निर्देश या विजेट के साथ डोम बदलते हैं?

मेरा लक्ष्य यह समझना है कि angularJS का सही तरीके से उपयोग कैसे करें। मैं angularJS का उपयोग कर डीओएम संरचना को गतिशील रूप से बदलने के लिए चर के चयन को बांधने में सक्षम होना चाहता हूं। मुझे नहीं लगता कि मैं दस्तावेज को समझ रहा हूं जो कोणीय प्रदान करता है और मुझे यहां कोई उदाहरण नहीं मिला है या अन्यथा। किसी भी मदद की सराहना की है।कोणीय - गतिशील रूप से निर्देश या विजेट के साथ डोम बदलते हैं?

विचार यह है कि मेरे पास इस उपयोग का मामला है जहां मैं पहली बार प्रकार के चयन के साथ शुरू होता हूं और उस प्रकार से चयनित, उचित इनपुट प्रकार तत्व बनाए जाएंगे और फिर बाद में एनजी-मॉडल (टेक्स्टरेस से) उदाहरण के लिए चेकबॉक्स), प्रमाणीकरण/प्रतिबंधों के लिए कोणीय नियंत्रक द्वारा नियंत्रित सभी समय। मुझे पृष्ठ पर क्लोन-सक्षम तत्व रखने और jQuery को नष्ट करने और नए बनाने के विचार के लिए उपयोग किया जाता है, लेकिन मैं पढ़ रहा हूं कि नियंत्रकों के पास यह तर्क नहीं होना चाहिए और इसके बजाय निर्देश/विजेट के साथ बनाया जाना चाहिए। मैं इस तरह से निर्देशित किए जा रहे निर्देशों या विजेटों के किसी भी उदाहरण को नहीं देखता हूं, इसलिए मुझे यह भी सुनिश्चित नहीं है कि आगे कैसे बढ़ना है। क्या मैं इस तरह से डीओएम में हेरफेर करने के निर्देशों का उपयोग कर सकता हूं, न केवल एक बार बल्कि एक बार देखे गए तत्व के आधार पर कई बार?

उदाहरण के लिए मैं क्या करना चाहता हूं।

$scope.types = ['Type1','Type2'] 

// something along the lines of... 
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

प्रकार चुनकर 1:

शो 2 पाठ क्षेत्रों

प्रकार चुनकर 2:

एक संख्यात्मक इनपुट दिखाएँ
एक दिनांक पिकर दिखाएं

धन्यवाद,

-JR।

स्रोत

2012-08-07 kman

इस तरह मैं इसे करूँगा। ध्यान दें कि यह सिर्फ एक शुरुआती बिंदु है। संबंधित इनपुट में विशेष मानों के लिए बाध्यकारी होने का अभी भी एक मामला है। मुझे उम्मीद है यह मदद करेगा।

मार्कअप:

<html ng-app="App" ng-controller="MainCtrl"> 

<body> 

    <component index="0"></component> 
    <component index="1"></component> 
    Current type: {{type}} 
    <button ng-click="toggleType()">Toggle</button> 

</body> 

</html>

निर्देशक:

var ngApp = angular.module('App', []).directive('component', function() { 
    var link = function(scope, element, attrs) { 
    var render = function() { 
     var t = scope.layouts[scope.type][attrs.index]; 
     if (t === 'textarea') { 
     element.html('<' + t + ' /><br>'); 
     } 
     else { 
     element.html('<input type="' + t + '"><br>'); 
     } 
    }; 
    //key point here to watch for changes of the type property 
    scope.$watch('type', function(newValue, oldValue) { 
     render(); 
    }); 

    render(); 
    }; 
    return { 
    restrict : 'E', 
    link : link 
    } 
});

नियंत्रक:

var MainCtrl = function MainCtrl($scope) { 
    $scope.type = 'Type1'; 
    $scope.types = [ 'Type1', 'Type2' ]; 
    $scope.layouts = { 
    'Type1' : [ 'textarea', 'textarea' ], 
    'Type2' : [ 'number', 'text' ] 
    }; 

    $scope.toggleType = function() { 
    if ($scope.type === 'Type1') { 
     $scope.type = 'Type2'; 
    } 
    else { 
     $scope.type = 'Type1'; 
    } 
    }; 
};

स्रोत

2012-08-08 23:06:38

यह वह जगह है जहां मैं जा रहा था, मेरी इच्छा है कि ऐसे कई उदाहरण थे जिन्हें मैं अपनी साइट से सीख सकता था। यह घड़ी समारोह इसके लिए बहुत आसान है। यह वही प्रकार है जिसकी मैं तलाश कर रहा था। मैं मदद की सराहना करता हूं! – kman

(निर्देश कोड के बारे में :) मुझे लगता है कि आपको 'रेंडर' के अंदर 'स्कोप। $ घड़ी' नहीं जोड़ना चाहिए, क्योंकि आपको केवल एक बार '$ watch' सेट अप करना होगा। – mik01aj

@ m01 यह वास्तव में लिंक फ़ंक्शन में है। क्या यह वास्तव में एक से अधिक बार चल रहा है? –

सबसे ड्रॉप ड्रॉप आसान तरीका मैं इसे करने के बारे में सोच सकता हूं केवल एनजी-शो और एनजी-छिपाने का उपयोग कर रहा है।

http://jsfiddle.net/cfchase/Xn7PA/

<select ng-model="selected_type" ng-options="t for t in types"> 
</select> 

<div ng-show="selected_type=='Type1'"> 
    <input type="text" id="text1" ng-model="text1"/> 
    <input type="text" id="text2" ng-model="text2"/> 
</div> 

<div ng-show="selected_type=='Type2'"> 
    <input type="number" id="numeric1" ng-model="numeric1"/> 
    <input type="date" id="date1" ng-model="date1"/> 
</div>

बेशक आप html में किसी भी तर्क डाले बिना इस साफ कर सकते हैं, लेकिन मैं नियंत्रक में अतिरिक्त सामान के साथ इस मुद्दे बादल नहीं करना चाहता था।

सत्यापन के लिए, forms documentation देखें। ऐसा लगता है कि आप ज्यादातर कस्टमर के साथ सत्यापन में निर्मित एंगुलरजेएस का उपयोग करेंगे।

निर्देशों के लिए, online docs घने हैं, लेकिन यह थोड़ी देर के लिए प्रयोग करने के बाद क्लिक करेगा। एक gentler परिचय के लिए, जॉन Lindquist YouTube पर एक हैलो विश्व ट्यूटोरियल है। निर्देशक निश्चित रूप से कोणीय में डीओएम हेरफेर करने का तरीका हैं।

स्रोत

2012-08-08 01:45:14 Chris

धन्यवाद, मैं इस की कोशिश की है और यह काम करने लगता है, लेकिन मुझे आसानी से करने में असमर्थ छोड़ देता है मेरे पास तत्व होने पर तत्व में परिवर्तन होता है। उस वीडियो ने निश्चित रूप से मदद की! – kman

कोणीय - गतिशील रूप से निर्देश या विजेट के साथ डोम बदलते हैं?

उत्तर

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