Question

我正在使用Angularjs 1.7，并且试图将数组从父控制器传递给组件，如何将arraySteps和selectedSteps传递给组件。

我尝试了以下操作，但没有成功。我没有在组件控制器中获取arraySteps

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

单向绑定需要标准化为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>

有关更多信息，请参见

AngularJS Developer Guide - Directive Normalization

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

1 个答案: