AngularJS $ scopeが正しく動作しない理由は何ですか？

Question

私は、私は配列を作成し、register機能により、サーバーにそれを投稿したい場合は、ここでコントローラのコードはAngularJSでの新機能だ：

root.controller('mainController', function($scope) { 
    $scope.lineItems = []; 
    $scope.addItem = function (id) { 
     $scope.lineItems.push(id); 
     console.log($scope.lineItems); 
     // gives me right data -> Array [ "1", "2", "3", "4", "1" ] 
    }; 
    $scope.register = function() { 
     // post data to server 
     console.log($scope.lineItems); 
     // gives me an empty array -> Array [ ] 
    }; 
}); 

ここではHTMLコードとディレクティブです：

<div class="container" ng-controller="mainController"> 
    <a ng-click="register()"></a> 

    <div ng-repeat="product in products"> 
     <a class="btn" ng-click="addItem(product.id)">Add</a> 
    </div> 
</div> 

私がregister関数に呼び出すときはいつでも、配列要素の代わりに空の配列を返しますが、addItem関数では起こりません。

Answer 1

これはあなたのコードであり、正しく動作します。

var app = angular.module("testApp", []); 
 
app.controller('testCtrl', function($scope){ 
 
    
 
    $scope.products = [{id:1},{id:2},{id:3},{id:4}]; 
 
    
 
    $scope.lineItems = []; 
 
    $scope.addItem = function (id) { 
 
     $scope.lineItems.push(id); 
 
     console.log($scope.lineItems); 
 
     // gives me right data 
 
    }; 
 
    $scope.register = function() { 
 
     // post data to server 
 
     console.log($scope.lineItems); 
 
     // gives me an empty array 
 
    }; 
 

 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp" ng-controller="testCtrl"> 
 
    <a ng-click="register()">Register</a> 
 

 
<div ng-repeat="product in products"> 
 
    <a class="btn" ng-click="addItem(product.id)">Add : {{product.id}}</a> 
 
</div> 
 
    
 
</div>