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

【问题标题】：Angular. Pass data from component to parent controller角。将数据从组件传递到父控制器
【发布时间】：2016-12-25 12:44:56
【问题描述】：

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

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 中获取电话对象。现在我只从 .

【问题讨论】：

标签： angularjs controller components

【解决方案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!
    }
}]);

希望对你有帮助！

【讨论】：

$scope.phoneSelected() 中的电话仍然是像 'ABC' 这样的文本，而不是对象 {name: 'ABC', number: '723-543-122'}

【解决方案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)
}

【讨论】：