如何在角度指令中将 ng-model 输入值添加到范围

Question

我是 Angular 新手，正在尝试创建我的第一个指令。

这是一个例子：

isrcorderapp.directive "isrcrow", () ->
    restrict:'A'
    controller: 'isrcorders'
    template: '<td><input id="artist" ng-model="{{artist}}"/></td>
                <td><input id="title" ng-model="{{title}}"/></td>
                <td><select id="isrctype" ng-model="{{isrctype}}" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>
                <td><input id="duration" ng-model="{{duration}}"/></td>
                <td><input id="year" ng-model={{year}}/></td>
                <td><input type="button" value="Add ISRC" ng-click="AddIsrc()" class="btn btn-small btn-success" />
                    <input type="button" value="Delete" ng-click="RemoveIsrc()" class="btn btn-small btn-danger" />
                </td>'
    replace: false
    scope:
        artist:'@'
        title:'@'
        isrctype:'@'
        duration:'@'
        year:'@'
    link: (scope,element,attr) ->

在我在元素中添加范围和 ng-model 之前，该指令一直有效。

这是添加之前的一个工作示例：

http://plnkr.co/edit/oxXZlsFIDAbBCYMDOYMH?p=preview

我想将fields(artist.title,isrcType...) 的值添加到范围对象，但在加载网页时我不断收到错误：

错误：[$parse:syntax]

我该如何解决这个问题？我在这里做错了什么？

Answer 1

使用 angular 的一个经验法则是，ng-model 中应该始终有一个点。

由于您要构建行的集合，数据方面首先将它们视为对象数组。然后您可以使用ng-repeat 从该数组生成html....而不是使用不属于控制器的jQUery。添加新行是通过将新对象推送到数组来完成的，角度将相应地更新 DOM。同样，从数组中删除，角度将删除html

这是一个工作版本，包括如何从数组中删除对象以删除一行。

ng-repeat 将为每一行创建一个子作用域，因为我们现在在ng-model 中使用一个点，所以子作用域中的对象将引用控制器父作用域中数组中的对象

isrcorderapp.directive("isrcrow", function(){
  return {
    restrict:'A',
    template: '<td><input  ng-model="row.artist"/></td>\
                <td><input ng-model="row.title"/></td>\
                <td><select  ng-model="row.isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
                <td><input ng-model="row.duration"/></td>\
                <td><input ng-model="row.year"/></td>\
                <td><input type="button" value="Add ISRC" ng-click="AddIsrc()" class="btn btn-small btn-success" />\
                    <input type="button" value="Delete" ng-click="RemoveIsrc(row)" class="btn btn-small btn-danger" />\
                </td>',
    replace: false
  }
});

isrcorderapp.controller("isrcorders", function($scope,$http,$compile) {
    function newItem(){
      return{
        artist:'',
        title:'',
        duration:'',
        year:'',
        isrctype:''
      }
    }
    $scope.recordingTypes = [
        {type:'A'},
        {type:'B'},
        {type:'C'},
        {type:'D'},
        {type:'E'}
        ];
      /* start array with blank object since we don't have ajax source yet*/  
     $scope.items=[newItem()] ;  

    $scope.AddIsrc = function() {
     $scope.items.push(newItem())
    };
    $scope.RemoveIsrc=function(row){
      var index=$scope.items.indexOf(row);
      $scope.items.splice(index,1)
    }    

});

在 html 中，我使用ng-controller 调整了控制器内的包装表，并将ng-repeat 添加到<tr>

<tr ng-repeat="row in items" isrcrow=""></tr>

DEMO

如果你还没有这样做，你应该阅读这篇非常有价值的帖子"Thinking in AngularJS" if I have a jQuery background?