Bir yönerge ile giriş için ngModel ekleme

Question

Bir girdi elemanım var ve özel bir yönerge kullanarak bir ngModel ve ngClass'ı bağlamak istiyorum, ancak bazı sıkıntılarım var.

Ben Ne:

<input type="text" myDirective="PropertyFromScope" /> 

Ne sonucunda istiyorum:

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" /> 

Ben yönerge herhangi bir giriş etiketiyle çalışmak istiyorum, çünkü şablonları kullanarak önlemek çalışıyorum. İşte

angular.module('customDirectives', []) 
.directive('myDirective', function() { 
    var linker = function (scope, element, attrs) { 
     attrs.$set('ngModel', attrs.myDirective); 
     attrs.$set('ngClass', '{\'class\' : MethodFromScope}'); 
    } 
    return { 
     restrict: 'A',   
     link: linker 
    } 
}); 

bir JSFiddle var:

İşte ben bugüne kadar ne var http://jsfiddle.net/Q8QJJ/

Answer 1

Bunu başarmak için çalışıyorsunuz?

Oldukça basit çözüm: İşte

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A',   
     compile: function(element, attrs) { 
      element.attr('ng-model', attrs.myDirective); 
      element.removeAttr("my-directive"); 
      element.attr('ng-class', '{\'class\' : testFunction()}'); 
      return { 
       pre: function preLink(scope, iElement, iAttrs, controller) { }, 
       post: function postLink(scope, iElement, iAttrs, controller) { 
       $compile(iElement)(scope); 
       } 
      } 
     } 
    } 
}); 

keman Bu (o özelliklerini ekledim ancak onları fark görünmüyordu derleme fonksiyonunda çalışmaya alamadı http://jsfiddle.net/V9e9M/

Answer 2

olduğunu). Ancak, bu bağlantı işlevi iş gibi görünüyor:

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var wrappedElement = angular.element(
       '<input type="' + attrs.type + '" ng-model="' 
       + attrs.myDirective + '">'); 
      element.replaceWith(wrappedElement); 
      $compile(wrappedElement)(scope); 
     } 
    } 
}); 

Fiddle

Not: Ben ng sınıf eklemek unuttum ama ng model çalışırsa, ng sınıf çalışması gerekir varsayalım.

Güncelleme: Özel bir yönergesi ile bir ngModel bağlama, ben benzer bir sorunu olan bu sayfada indi

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     compile: function (tElement, tAttrs) { 
      // for some unknown-to-me reason, the input must 
      // be wrapped in a span or div: 
      var tplElement = angular.element('<span><input></span>'); 
      var inputEl = tplElement.find('input'); 
      inputEl.attr('type', tAttrs.type); 
      inputEl.attr('ng-model', tAttrs.myDirective); 
      tElement.replaceWith(tplElement); 
     } 
    }; 
}); 

Fiddle

Answer 3

: Burada

bir derleme işlevini kullanan bir versiyonu . Soru birkaç yaşında ama belki benim çözümüm başka birine yardım edecek.

İlk olarak, index.html dosyasında, bazı yönergelerimle birlikte özel yönergemi kullanıyorum. Html'deki tire durumunu not edin. Özellik değerleri direktifte kullanmak istediklerim. Ben varsayılan görünce

index.html 

<div> 
    <form name="userInfo"> 
     <my-custom-directive for-model="ctrl.userInput" 
          for-label="Enter User Info" 
          for-other="more info for the directive"> 
     <my-custom-directive> 
    </form> 
</div> 
// check to see the binding. 
{{ ctrl.userInput }} 

Sonra, partial.html içinde, ben yönerge çalışır durumda ise görmek için bazı varsayılan değerleri ayarlamak için gidiyor ve ben.

partial.html 

<div class="form-group"> 
    <label>blankLabel</label> 
    <input type="text" 
      class="form-control" 
      ng-model="modelBlank"> 
</div> 

Yönerge, muhtemelen en yaygın sorun olan bazı farklı sözdizimlerine gereksinim duyar. Bir değişkeni tanımlamak isterim, muhtemelen birden fazla özellik atadım. Daha sonra değişkende .attr() öğesini arayın ve uygulamak istediğiniz yeni bilgiyi iletin. Bu durumda, kelimenin tam anlamıyla 'ng-model' ve index.html'de ayarlanan özel özniteliğin değeri.

Konsolu kullanabilirsiniz.log (element), ancak çok fazla bilgi üretecek. Sayfa bir kez ng-modelini özel değere ayarlamak için yüklendiğinde incelemek daha iyidir. Doğru bağlanmışsa, index.html sayfasındaki {{ctrl.userInput}}, metne yazılan metni göstermelidir.

Bu çok iş olduğunu, ancak şimdi myCustomDirective geçirilen farklı bilgilerle yeniden kullanılabilir: Şahsen

<my-custom-directive for-model="ctrl.userName" 
        for-label="Enter Your Name:" 
        for-other="more info for the directive"> 
<my-custom-directive> 
<my-custom-directive for-model="ctrl.userSelection" 
        for-label="Make a selection:" 
        for-other="more info for the directive"> 
<my-custom-directive> 

, Ben şeyler dahil bu yöntemle özelliklerini veya açısal direktifleri eklerken bir sorun, hiç olmadı Uib-typeahead gibi. Sadece html ve javascript arasındaki sözdizimi farklılıklarını gözlemlemeyi unutmayın.