無法獲得在指令

中輸入的值我試圖創建一個指令，遍歷供應商對象數組，每個供應商都有一個comments數組屬性。我想在指令中添加一個文本區域，以填充指令鏈接方法中的comments數組。我是不是能夠得到從文本區域的價值，我在做什麼錯無法獲得在指令

我控制器>>

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

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

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

    ] 

})

我的指令>>

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


      } 
     } 
});

我的html >>

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

請找到摔跤手here

來源

2016-06-12 MeanMan

發生這種情況，因爲'NG-repeat'已經建立了一個內部範圍這是受繼承問題（**總是**在'ng-model'中使用點 - http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs）。在這種情況下，你需要一個'ng-repeat'以外的對象來保存這個值，如果你使用控制器而不是鏈接，這可能會更容易。 – Claies

可以實現上述使用以下兩種方法

方法1

您可以在新的評論你的供應商等級的屬性，然後點擊鏈接，你可以把它推到意見陣列像下面

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


      } 
     } 
});

方法2

你可以像下面在這裏你可以設置在NG-模糊您的評論，然後可以將其添加點擊按鈕

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


      } 
     } 
});

來源

2016-06-12 10:20:06

無法獲得在指令

回答

相關問題