Question

我是角色的新手，并试图创建我的第一个指令。

以下是一个例子：

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

有角度的一条经验法则是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?

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

1 个答案: