Angularjs 如何将ng模型输入值添加到angular指令中的范围

我对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) ->

isrcorderapp.directive“isrcrow”，（）->
限制：'A'
控制器：“ISRecorders”
模板：'
'
替换：false
范围：
艺术家：“@”
标题：“@”
isrctype:“@”
持续时间：'@'
年份：“@”
链接：（范围、元素、属性）->

在我在元素中添加scope和ng模型之前，该指令一直有效

以下是添加前的工作示例：

我想将

字段（artist.title，isrcType…

的值添加到scope对象中，但在加载网页时，我不断收到错误：

错误：[$parse:语法]

---

我怎样才能解决这个问题？我在这里做错了什么？

关于角度的一个经验法则是，在

ng模型中，您应该始终有一个点

由于您正在构建一个行集合，所以在数据方面，首先将它们视为一个对象数组。然后您可以使用
ng repeat
从该数组生成html……而不是使用不属于控制器的jQUery。添加新行是通过将新对象推送到数组来完成的，angular将相应地更新DOM。类似地，remove from array和angular将删除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)
    }    

});


如果您还没有这样做，您应该阅读这篇非常有价值的文章
关于角度的一条经验法则是您应该在
ng model
中始终有一个点

由于您正在构建一个行集合，所以在数据方面，首先将它们视为一个对象数组。然后您可以使用
ng repeat
从该数组生成html……而不是使用不属于控制器的jQUery。添加新行是通过将新对象推送到数组来完成的，angular将相应地更新DOM。类似地，remove from array和angular将删除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)
    }    

});


如果你还没有这样做，你应该读这篇非常有价值的文章