Question

我有一张桌子，我试图使用Angular来处理表格中的添加/删除行。我已经创建了一个服务来处理行数据的存储，但是当新数据插入到模型中时，我无法获得更新视图。

这是一段代码：http://plnkr.co/edit/Vksgsi7ixGKXwuNhykU7?p=preview

这是Javascript代码：

var myModule = angular.module( "myApp", [] );

myModule.service( 'myService', [ '$rootScope', function( $rootScope ) {

    var service = {
        rows: ['a', 'b'],

        addRow: function(obj) {
            service.rows.push( obj );
            $rootScope.$broadcast('rows.update');
        }

    };

    return service;

}] );

myModule.controller( "myController", [ '$scope', 'myService', function( $scope, myService ) {
    var controller = this;

    controller.rows = myService.rows;

    $scope.$on( 'rows.update', function( event ) {
      console.log('received an update event. rows.length = ' + controller.rows.length);
        controller.rows = myService.rows;
    });

}] );

myModule.directive( "newRowButton", [ 'myService', function( myService ) {
    return {
        restrict: "A",
        link: function( scope, element, attrs ) {
            element.bind( "click", function() {
                myService.addRow( 'c' );
            });
        }
    };
}] );

HTML：

<body ng-app="myApp" ng-controller="myController as controller">
<div>
  <table>
        <tbody>
            <tr ng-repeat="row in controller.rows">
                <td>hello</td>
                <td>{{row}}</td>
            </tr>
        </tbody>
    </table>
    <button new-row-button>New</button>
</div>
</body>

我可以看到（通过console.log语句）新条目被插入到行数据数组中，但是在视图中没有创建新行。

为什么这不起作用的任何想法？

Answer 1

所以基本上如果你在一个指令中更改视图我可以建议你使用$scope.$apply() -function。它会更新视图肯定。以下是您需要更改的行：

scope.$apply(myService.addRow( 'c' ));

Answer 2

你需要调用范围。$ apply（）;单击该按钮将添加一行c，但您不能再添加任何行，因为ng-repeat会抱怨重复。这就是你需要的：

myModule.directive( "newRowButton", [ 'myService', function( myService ) {
    return {
        restrict: "A",
        link: function( scope, element, attrs ) {
            element.bind( "click", function() {
                myService.addRow( 'c' );
                scope.$apply();
            });
        }
    };
}] );

使用AngularJS向表中添加行

2 个答案: