Mehrere Richtlinien teilen gleichen Umfang

Question

Ich habe eine Richtlinie entwickelt, aber es ist immer Funktionalität auf der Seite auf das letzte Element der Anwendung, hier ist mein Code:

HTML:

<div ng-controller="MyCtrl"> 
    <input type="text" email-commy comma-separated-data="model1" class="form-control"/> 
    <input type="text" email-commy comma-separated-data="model2" class="form-control"/> 
</div> 

JS:

var app=angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.model1 = "abc@gmail.com"; 
    $scope.model2 = "abc2@gmail.com"; 
} 

app.directive("emailCommy", function(){ 
    return { 
    scope: { 
     commaSeparatedData: '=' 
    },  
    restrict: "A", 
    multiple: true, 
    link: function (scope, elem, attrs, ngModel) { 

     function handler(dataString){ 

     function buildEmailList() { 

      var lis = data.map(function (em, index) { 
      return "<li>" + em + "<span class='remove-element' data-index='" + index + "'>&times;</span>" + "</li>"; 
      }).join(""); 

      var input = $("<input/>", {"class": "form-control shadow-element", "placeholder": "Enter..."}); 
      lis += "<li class='input-field'>" + input.wrap("<p/>").parent().html() + "</li>"; 

      return "<ul class='list-inline'>" + lis + "</ul>"; 
     } 

     function renderer() { 
      $wrapper.empty().append(buildEmailList());   
      elem.addClass("hide").before($wrapper); 
      listener(); 
     } 

     function listener() { 
      angular.element(".shadow-element").off("keypress").on("keypress", function (evt) { 
      var $this = $(this), 
       charCode = evt.which || evt.keyCode; 

      //add input in case of (comma, enter, and semi-colon) pressed 
      if ($this.val() && (charCode === 44 || charCode === 13 || charCode === 59)) { 
       data.push($this.val().toLowerCase());          
       renderer(); 

       updateModel(); 
       $this.val(""); 
      } 
      }); 

      angular.element(".remove-element").off("click").on("click", function() { 
      var $this = $(this), 
       index = $this.data("index"); 

      data.splice(index, 1); 
      updateModel(); 
      renderer(); 
      }); 
     } 

     function updateModel(){ 
      var updatedVal = data.join(","); 
      $(elem).val(updatedVal); 
     } 

     if(dataString) { 
      var data = dataString.split(",").map(function (em) { 
      return em.toLowerCase().trim(); 
      }); 

      var $wrapper = $("<div/>", {"class": "email-container"}); 

      renderer(); 
     } 
     } 

     handler(scope.commaSeparatedData); 

     //scope.$watch(attrs.commaSeparatedData, handler); 
    } 
    }; 
}); 

Hier Geige: http://jsfiddle.net/RmDuw/928/

D Richtlinie nur am letzten Element arbeiten. Wenn ich Daten in der ersten Direktive hinzufüge, fügt es unter eins hinzu.

Bitte helfen, und schlagen Sie mir vor, wie zu beheben. Dank

Answer 1

einfach Ihren Code ändern, um die Eingabe der aktuellen Richtlinie wie folgt zu wählen:

function listener() { 
    $wrapper.find('input').on(... 

und Entfernen Element:

$wrapper.find('span').. 

Siehe fiddle