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)
    }

});

所以我选择了手机列表。我想要的是在select和submit表单之后在formController中获取phone对象。现在我只获得文本值。

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)
}

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

2 个答案: