Question

我正在尝试使用angular row指令向表追加一行：

以下是plunker： http://plnkr.co/edit/RFT5e5kbdCJdpPLWUqFD?p=preview

当我点击＆＃34;添加Isrc＆＃34;按钮应该添加一个新行，但它不起作用。

var isrcorderapp = angular.module('plunker', []);

isrcorderapp.directive("isrcrow", function(){
  return {
    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-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
                <td><input id="duration"/></td>\
                <td><input id="year"/></td>\
                <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\
                    <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\
                </td>',
    replace: false
  }
});

isrcorderapp.controller("isrcorders", function($scope,$http) {
    $scope.recordingTypes = [
        {type:'A'},
        {type:'B'},
        {type:'C'},
        {type:'D'},
        {type:'E'}
        ];

  $scope.AddIsrc = function() {
      var e;
      $('#isrctable tbody').append('<tr isrcrow> </tr>');
      return e = '';
    };



});

Answer 1

onclick="AddIsrc()"需要ng-click="AddIsrc()"来调用$ scope上的方法。

在Plunker上也缺少jQuery，必须添加。

需要编译行以使指令执行...

isrcorderapp.controller("isrcorders", function($scope, $http, $compile) {

    // ...

    $scope.AddIsrc = function() {
        var e;
        var tr = $('<tr isrcrow> </tr>');
        $('#isrctable tbody').append(tr);
        $compile(tr)($scope);
        return e = ''; // not sure what this is
    };
});

更新了plunker：http://plnkr.co/edit/oxXZlsFIDAbBCYMDOYMH?p=preview

如何使用angular row指令将行附加到表中

1 个答案: