Question

我正在尝试创建一个循环遍历供应商对象数组的指令，每个供应商都有一个注释数组属性。我想在指令中添加一个文本区域，该区域将在指令的link方法中填充comments数组。我无法从文本区域获取值，我做错了什么

我的控制器＆gt;＆gt;

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

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

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

    ]

})

我的指示＆gt;＆gt;

.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＆gt;＆gt;

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

请找到plunker here

Answer 1

您可以使用以下两种方法实现上述目标

方法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-blur的评论，然后点击按钮就可以添加

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


            }
         } 
});

无法获得指令中输入的值

1 个答案: