AngularJS, dinamik olarak yüklenen verileri

Question

yönergesinden ayrıştırmıyor. N sayısı oluşturmaya çalışıyorum Öznitelikten (N'nin dizinin uzunluğudur) geçirildiği diziye dayalı olarak dinamik olarak denetimlerini seçin. Dizinin bir nesnenin

Yapısı şöyle:

selectDescription = { 
    array: arrayObject, //ng-options, a string as 'item as item.name for item in selectArray[0]' 
    change: methodName, //ng-change, actionname 
    level: levelNumber //level number 
} 

Yani iç span etiketi ben özelliğinden olsun selectDescription(s) sayısına bağlıdır seçme kontrollerin sayısı.

İlk seçme denetimi başarıyla başarıyla tamamlandı. Sonraki seçim kontrolleri, daha önce oluşturulmuş olan seçenekten bir seçenek seçmek için denetimleri seçili olmalıdır. Ama benim durumumda değil. Geçerli inputEl (bir seçeneğin seçilmesi) içinde açısal öğelerin başarıyla eklenmesine rağmen, bu kullanıcı arabiriminde oluşturulmuyor. Sanırım çok önemli bir şeyi özlüyorum. selectDescriptions değişikliği üzerinde

, bir çevrilmiş nitelik geçtiği ben sırayla span içeride önceki HTML temizledikten sonra yeniden eklemek elemanları işlevi hale çalıştığı, bağlantıdan scope.$editable.render() çağırmak mümkün duyuyorum, ayarlanır.

Benim Kod:

Eğer Açısal direktifin link işlevinde dinamik HTML içerik ekleyerek olduğundan

app.directive('editableLocation', function(editableDirectiveFactory) { 
    var createElement = function(el, index){ 
     var newElement = angular.element("<select/>"); 
     newElement.attr('ng-model','$data'+index); 
     newElement.attr('ng-options',el.array); 
     newElement.attr('ng-change',el.change.substring(0, el.change.length - 1)+", $data"+index+")"); 
     return newElement; 
    } 

var descriptions = [] ; 
var dir = editableDirectiveFactory({ 
    directiveName: 'editableLocation', 
    inputTpl: '<span></span>', 
    render: function() { 
    this.parent.render.call(this); 
    this.inputEl.html(""); 
    for(var i = 0 ; i < descriptions.length ; i ++){ 
     this.inputEl.append(createElement(descriptions[i], i)); 
    } 
    } 
}); 
var linkOrg = dir.link; 

dir.link = function(scope, el, attrs, ctrl) { 
    console.log(el); 
    descriptions = scope.$eval(attrs.description); 
    scope.$watch('flipped',function(newValue,oldValue){ 
     if(newValue != 0){ 
      scope.$editable.render(); 
     } 
    }); 
    return linkOrg(scope, el, attrs, ctrl); 
}; 

return dir; 
}); 

Answer 1

, Açısal değil oto derleme/ayrıştırmak olacaktır. $compile yönergesini kullanarak el ile yapmanız gerekir. Eğer tüm HTML eklenen sonra Yani, yönerge kapsamı veya başka bir kapsam element dinamik HTML ve scope ürettiğini sizin herhangi bir ana bileşen olduğu yerlerde

$compile(element.contents())(scope); 

(kodunuzda $compile enjekte) aşağıdaki do Dinamik HTML'ye eklenmesini istediğiniz

Answer 2

xeditable.js'a bakıyorum Xeditable'ın, editableController içinde tanımlı olan show yöntemini arayarak UI'yi oluşturduğunu buldum.

self.show = function() { 
    self.setLocalValue(); 
    self.render(); //calls 'render' function of 'editableDirectiveFactory'; that' where my custom UI lies 
    $element.after(self.editorEl); //attaches newelement(especially whole <form/> element) 
    $compile(self.editorEl)($scope); //renders whole UI(and also the newly attached one) 
    self.addListeners(); 
    $element.addClass('editable-hide'); 
    return self.onshow(); 
}; 

Yani ne hissetti deyişle, ben controller alır benim link fonksiyonu, bu show yöntemini çağırmanız gerekir: olarak

O tanımlanır.

dir.link = function (scope, el, attrs, ctrl) { 
    $element = el; 
    scope.$watch(attrs.flipped, function (newValue, oldValue) { 
     //re-render element if flipped is changed; denoting description of select controls have been altered 
     if (newValue != 0) { 
      ctrl[0].show(); //this will call render function and also $compile({{content/html/element}})(scope) 
     } 
    }); 
    return linkOrg(scope, el, attrs, ctrl); 
}; 

Ve sadece bir form görüntülenir olsun, böylece aynı zamanda, (önceki hale UI içerir) önceki <form/> elemanı gizlemek gerekir:

Bu benim yaptığım budur.

Bu benim render' function of editableDirectiveFactory` o önceki <form/> eleman saklandı nasıl: dediğin gibi sorunumu en azından :)