将参数从父控制器传递给组件

Question

I am using Angularjs 1.7 and I am trying to pass an array from the parent controller to the component.How can I pass arraySteps and selectedSteps to the component.

I tried the following but didn't work. I am not getting the arraySteps in the component controller

ulMultiselect.component.js

angular.module('ulMultiselect.module').component('ulMultiselect', {
    templateUrl: 'app/components/ulMultiselect/ulMultiselect.template.html',
    controller: 'ulMultiselect.controller',
    bindings: {
        arraySteps: '<'
    },
    transclude: true
});

ulMultiselect.controller.js

angular.module('ulMultiselect.module').controller('ulMultiselect.controller', 
function () {
    var self = this;
    self.$onInit = function () {
        if (typeof self.arraySteps === 'undefined') {
            self.arraySteps = [];
        }
    };
});

ulMultiselect.template.html

<div layout="row">
    <md-input-container style="width:100%">
        <label>Steps</label>
        <md-select ng-model="$ctrl.selectedSteps" multiple>
            <md-option ng-value="step.StepName" ng-repeat="step in $ctrl.arraySteps">{{step.StepName}}</md-option>
        </md-select>
    </md-input-container>
</div>

mainTest.html

<ul-Multiselect arraySteps="$ctrl.steps"></ul-Multiselect>

mainTest.controller.js

angular.module('view.mainTest.module').controller('view.mainTest.controller', 
function () {
    var self = this;
    self.$onInit = function () {
        self.steps = [{ StepName: "Step1" }, { StepName: "Step2" }, { StepName: "Step3" }];
    }; 
});

Answer 1

The one-way binding needs to be normalized to kebab-case:

̶<̶u̶l̶-̶M̶u̶l̶t̶i̶s̶e̶l̶e̶c̶t̶ ̶a̶r̶r̶a̶y̶S̶t̶e̶p̶s̶=̶"̶$̶c̶t̶r̶l̶.̶s̶t̶e̶p̶s̶"̶>̶<̶/̶u̶l̶-̶M̶u̶l̶t̶i̶s̶e̶l̶e̶c̶t̶>̶
<ul-multiselect array-steps="$ctrl.steps"></ul-multiselect>

For more information, see

• AngularJS Developer Guide - Directive Normalization