2016-06-12 4 views
0

zu erhalten Ich versuche, eine Direktive zu erstellen, die durch ein Array von Kreditor-Objekten iteriert, jeder Anbieter verfügt über eine Kommentar-Array-Eigenschaft. Ich wollte einen Textbereich in der Direktive hinzufügen, die das Kommentar-Array in der Link-Methode der Direktive füllen würde. Ich war nicht in der Lage, den Wert von Textbereich zu bekommen, was mache ich falschNicht in der Lage, den Wert in Direktive

meinen Controller >>

.controller("VendorController",function($scope){ 

    $scope.vendors = [ 
     { 
      id : 1, 
      name : "foo", 
      comments:[] 
     }, 

     { 
      id : 2, 
      name : "boo", 
      comments:[] 
     } 

    ] 

}) 

meine Richtlinie >>

.directive('vendorInterests',function(){ 
    return{ 
     restrict:'E', 
     replace: true, 
     scope: { 
      vendors: "=", 
      comment :"=" 
     }, 
     , 
    template:"<div>"+ 
       "<div ng-repeat='vendor in vendors'><div>{{vendor.name}}"+ 
       "</div>"+ 
       "<div ng-repeat='comment in vendor.comments'>{{comment}}</div>"+ 
       " <textarea rows='5' ng-model='comment'></textarea>"+ 
       " <button ng-click='addComment(vendor)'>Add Comment</button>"+ 
      "</div>", 
     link:function(scope, elem, attrs){ 

      scope.addComment=function(vendor){ 
      //scope.comment is coming empty, how do i pass the comment into 
      //this method and update the view 
       console.log(scope.comment); 
       //console.log(cntrl.$viewValue.comment); 
      vendor.comments.push(scope.comment); 
      } 


      } 
     } 
}); 

meine html >>

<body ng-app="dealApp"> 
    <div ng-controller="VendorController"> 
     <vendor-interests vendors="vendors"></vendor-interests> 
    </div> 
    </body> 

Bitte finden Sie den Plotter here

+1

Dies passiert, weil die 'ng-repeat' einen inneren Bereich erstellt hat, die Vererbungsproblemen unterliegt (** immer ** Verwenden Sie einen Punkt in 'ng-Modell' - http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). In diesem Fall benötigen Sie ein Objekt außerhalb der 'ng-repeat', das den Wert halten kann, was wahrscheinlich einfacher ist, wenn Sie einen Controller anstelle einer Verknüpfung verwenden. – Claies

Antwort

0

Sie können das erreichen oben mit folgenden zwei Ansätze

Ansatz 1

Sie können für neue Kommentare einer Immobilie bei Ihrer Lieferantenebene und dann auf die Schaltfläche klicken Sie auf die Kommentare Array wie unten drücken kann,

.directive('vendorInterests',function(){ 
    return{ 
     restrict:'E', 
     replace: true, 
     scope: { 
      vendors: "=", 
      comment :"=" 
     }, 
     template:"<div>"+ 
        "<div ng-repeat='vendor in vendors'><div>{{vendor.name}}"+ 
        "</div>"+ 
        "<div ng-repeat='comment in vendor.comments'>{{comment}}</div>"+ 
        " <textarea rows='5' ng-model='vendor.newComment' ></textarea>"+ 
        " <button ng-click='addComment(vendor)'>Add Comment</button>"+ 
       "</div>", 
     link:function(scope, elem, attrs){ 

      scope.addComment=function(vendor){ 
       vendor.comments.push(vendor.newComment); 
      } 


      } 
     } 
}); 

Ansatz 2

können Sie etwas haben, wie unten wo Sie Ihren Kommentar auf ng-blur setzen können und dann können Sie es auf der Schaltfläche klicken klicken

.directive('vendorInterests',function(){ 
    return{ 
     restrict:'E', 
     replace: true, 
     scope: { 
      vendors: "=", 
      comment :"=" 
     }, 
     template:"<div>"+ 
        "<div ng-repeat='vendor in vendors'><div>{{vendor.name}}"+ 
        "</div>"+ 
        "<div ng-repeat='comment in vendor.comments'>{{comment}}</div>"+ 
        " <textarea rows='5' ng-model='comment' ng-blur='setNewComment(comment)'></textarea>"+ 
        " <button ng-click='addComment(vendor)'>Add Comment</button>"+ 
       "</div>", 
     link:function(scope, elem, attrs){ 
      var comment; 
       scope.setNewComment=function(c){ 
       comment=c; 
       } 
      scope.addComment=function(vendor){ 
       debugger; 
       // console.log(scope.comment); 
       //console.log(cntrl.$viewValue.comment); 
      vendor.comments.push(comment); 
      } 


      } 
     } 
}); 
Verwandte Themen