角度。将数据从组件传递到父控制器

Question

很热以从父控制器中的组件收回数据。 我有这样的代码：

的index.html

<div ng-controller="formController"> 
    <phones-list phone="phone"></phones-list> 

    <button ng-click="saveForm()">Save</button> 
</div> 

form.controller.js

var app = angular.module('myApp'); 

app.controller('formController', ['$scope', function($scope) { 
    $scope.saveForm = function() { 
     console.log($scope.phone) 
    } 
}]); 

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/scripts/components/phones/phonesList.template.html', 
    controller: 'phonesListController', 
    bindings: { 
     phone: '=' 
    } 
}); 

phoneList.template.html

<select name="" id="" ng-change="$ctrl.change()" ng-model="$ctrl.phone"> 
    <option ng-repeat="phone in $ctrl.phones">{{ phone.name }}</option> 
</select> 

phoneList.controller.js

var app = angular.module('myApp'); 

app.controller('phonesListController', function() { 

    this.phones = [ 
     { 
      name: 'ABC', 
      number: '723-543-122' 
     }, 
     { 
      name: 'ABCDE', 
      number: '324-531-423' 
     }   
    ]; 

    this.change = function() { 
     console.log(this.phone) 
    } 

}); 

所以我有手机选择列表中。我想要的是在选择并提交表单后，在formController中获取电话对象。现在我只能从中获得文本值。

Answer 1

添加一个附加的绑定到你的phoneList组件，并在选择改变时调用一个函数来调用。

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/scripts/components/phones/phonesList.template.html', 
    controller: 'phonesListController', 
    bindings: { 
     phone: '=', 
     onChange: '&' //This will allow you to bind a function to your 
    }     //component that you can execute when something 
});     //happens 

phoneList.controller.js

var app = angular.module('myApp'); 

app.controller('phonesListController', function() { 

    this.phones = [ 
     { 
      name: 'ABC', 
      number: '723-543-122' 
     }, 
     { 
      name: 'ABCDE', 
      number: '324-531-423' 
     }   
    ]; 

    this.change = function() { 
     console.log(this.phone); 
     this.onChange({phone: phone}); //call our new callback and give it 
    }         //our update 

}); 

的index.html

<div ng-controller="formController"> 
    <phones-list phone="phone" 
       on-change="phoneSelected(phone)"> 
       <!--Tell our component which function we wish to bind to--> 
    </phones-list> 

    <button ng-click="saveForm()">Save</button> 
</div> 

form.controller.js

var app = angular.module('myApp'); 

app.controller('formController', ['$scope', function($scope) { 
    $scope.saveForm = function() { 
     console.log($scope.phone) 
    } 

    $scope.phoneSelected(phone){ 
     //Do your stuff here! 
    } 
}]); 

我希望有帮助！

Answer 2

我找到了解决方案。我更改了组件模板并将ng-options指令添加到。我不知道为什么在标准列表中做同样的事情更不容易。

的index.html

<div ng-controller="ProposalController"> 
     <phones-list phone="phone"></phones-list> 

     <button ng-click="saveForm()">Zapisz</button>  
    </div> 

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/components/phones/templates/phoneList.template.html', 
    controller: 'PhoneListController', 
    bindings: { 
     phone: '=' 
    } 
}); 

phoneList.controller.js

.... 
this.change = function() { 
    this.phone = this.selectedPhone; 
} 
.... 

phoneList.template.html

<select ng-model="$ctrl.selectedPhone" ng-change="$ctrl.change()" ng-options="phone.name for phone in $ctrl.phones"></select> 

个

form.controller.js

$scope.saveForm = function(){ 
    console.log($scope.phone) 
}