Angularjs - Domları direktifler veya aletler ile dinamik olarak değiştirin?

Amacım angularJS'nin nasıl doğru kullanılacağını anlamaktır. AngularJS kullanarak DOM yapısını dinamik olarak değiştirmek için değişken seçimini bağlayabilmek istiyorum. Sanırım açılışı sağlayan belgeleri anlıyorum ve burada veya başka bir örnek bulamadım. Herhangi bir yardım takdir edilir. Angularjs - Domları direktifler veya aletler ile dinamik olarak değiştirin?

Fikir şu ki, bu tip seçili türden biriyle seçildiğim ve bu türden seçildiği durumda, uygun giriş tipi elemanlar oluşturulacak ve daha sonra ng-modeliyle (sonradan onaylama/kısıtlama için angularjs denetleyicisi tarafından kontrol edilen tüm süre, örneğin onay kutuları. Sayfada klonlabilir elemanlara sahip olmak ve jQuery ile yeni bir şey oluşturmak ve oluşturmak için kullanıyorum, ancak bu denetleyicilerin bu mantığa sahip olmamasını ve bunun yerine yönergeler/gereçlerle oluşturulmasını okumayı okuyorum. Bu şekilde manipüle edilen herhangi bir direktif veya widget örneği görmüyorum, bu yüzden nasıl devam edeceğimi bile bilmiyorum. İzlenen bir öğeye göre DOM'u yalnızca bir kez değil, birden çok kez işlemek için yönergeleri kullanabilir miyim?

Ne yapmak istediğime örnek.

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

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

seç Tip 1:

göster 2 metin alanları

seç Tip 2:

bir tarih seçici göster sayısal girdi göster

( )

kaynak

2012-08-07 kman

Bunu nasıl yaparım. Bunun sadece bir başlangıç noktası olduğunu unutmayın. İlgili girdilerde belirli değerlere hala bir bağlanma sorunu vardır. Umut ediyorum bu yardım eder.

Biçimlendirme:

<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>

Yönergesi:

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 
    } 
});

Denetleyici:

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'; 
    } 
    }; 
};

kaynak

2012-08-08 23:06:38

Gittiğim yer burası, ya kendi sitelerinden öğrenebileceğim daha fazla örnek var. Bu saat fonksiyonu bunun için çok kullanışlıdır. Bu, tam olarak aradığım şey tipidir. Yardımı takdir ediyorum! – kman

(yönerge koduyla ilgili olarak) '$ watch''u yalnızca bir kez ayarlamanız gerektiğinden, 'render' içinde' scope. $ Watch' eklememelisiniz. – mik01aj

@ m01 aslında bağlantı işlevindedir. Aslında bir kereden fazla mı çalışıyor? –

Bunu yapmayı düşünebildiğim en kolay ölü yol, sadece ng-show ve ng-hide kullanarak.

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>

Tabii ki html herhangi mantığı koymadan bu kadar temiz olabilir, ama ben denetleyicisi ekstra şeylerle konuya gölge istemiyordu.

Doğrulama için, forms documentation'a bakın. Muhtemelen inşa ettiğiniz bazı özel ürünlerle doğrulamada yerleşik AngularJS'yi kullanacaksınız.

Yönergelere gelince, online docs yoğuntur, ancak bir süredir denedikten sonra tıklar. Daha nazik bir tanıtım için, Jon Lindquist'in YouTube numaralı telefondan merhaba bir dünya öğreticisi var. Direktifler kesinlikle Angular'da DOM manipülasyonu yapmak için bir yoldur.

kaynak

2012-08-08 01:45:14 Chris

Teşekkürler, ben bu denedim ve işe gibi görünüyor, ama kolayca yapmak için beni yapamaz bırakır Daha fazlasına sahip olduğumda öğeye dönüşür. Bu video kesinlikle yardımcı oldu! – kman

Angularjs - Domları direktifler veya aletler ile dinamik olarak değiştirin?

cevap

İlgili konular