动态地将名称添加到模板中的数组

Question

我正在尝试向数组中动态添加和赋值，并让它们填充。但是我甚至无法打印一个console.log语句。我有点困惑，为什么我没有收到错误或console.log语句。

控制器：

angular.module('myApp'). 
controller("Controller",["$scope", function($scope){ 

    $scope.customer = [ 

     { 
      name: 'Drew', 
      age: 30 
     }, 

     { 
      name: 'Meike', 
      age: 54 
     }, 

     { 
      name: 'Peter', 
      age: 25 
     }, 
     { 
      name: 'Alex', 
      age: 44 
     } 
    ]; 

    $scope.addCustomer = function(customer_name,customer_age){ 

     var person = { 
      name: customer_name, 
      age: customer_age 
     }; 

     customer.add(person); 

     console.log("You added a person "+person.name+" who is "+person.age+" years old."); 
    } 

}]) 
    .directive("myNames",function(){ 
     return{ 
      restrict : 'E', 
      transclude : false, 
      templateUrl: 'pages/myNames.html', 
      scope: { 
       listcustomers: "=" 
      } 
     }; 
    }); 

模板：

<div ng-repeat="customer in listcustomers"> 

    <table class="box-table" width="100%"> 
     <tr> 
      <th>Name:{{customer.name}}</th> 
      <th>Age:{{customer.age}}</th> 
     </tr> 
    </table> 

</div> 

<div> 
    <input type="text" placeholder="enter a name" ng-model="customer_name"> 
    <input type="text" placeholder="enter a age" ng-model="customer_age"> 
    <button type="submit" value="Submit" ng-click="addCustomer(customer_name,customer_age)">Submit</button> 
</div> 

的index.html

<div ng-controller="Controller"> 
     <my-names listcustomers='customer'></my-names> 
    </div> 

Answer 1

你应该通过addCustomer函数模板这样

<div ng-controller="Controller"> 
     <my-names listcustomers='customer' add-customer='addCustomer'></my-names> 
</div>