如何将$ ctrl值从一个地方传递给其他组件

时间:2017-03-22 06:32:11

标签: javascript angularjs html5

我正在使用Angular JS(1.6)应用程序。在我的应用程序内部我有组件 -

oprExternalInstructionsApp - >

oprScriptListPanel - >

我的<opr-list>模板文件中有oprScriptListPanel个组件。我正在$ctrl.externalInstructionsFiltered中传递<opr-script-list-panel>items="$ctrl.externalInstructionsFiltered"一样 但是我没有看到{{$ctrl.externalInstructionsFiltered}}在我的模板oprScriptListPanel中有任何数据。

我的模板代码 -

<opr-script-list-panel
    items="$ctrl.externalInstructionsFiltered"
    toolbar-buttons="$ctrl.toolbarButtons"
    selected-items="$ctrl.selectedInstructions"
    on-search="$ctrl.filterExternalInstructionsChanged(text)"
    on-double-click="$ctrl.edit(item)"
    item-actions="$ctrl.itemActions"
    item-tags="$ctrl.itemTags"></opr-script-list-panel>

<opr-script-list-panel组件中,我正在传递items -

this.externalInstructionsFiltered = [{
            "id": "1",
            "displayName": "abc",
            "description": "aqaa",
            "timeout": "3000",
            "isEnabled": "false",
            "isReadOnly":"false",
            "stepId":"ExternalInterface",
            "version":"1",
            "artifactOrigin":"custom",
            "filterId":"qwq" ,
            "filterName":"sdsf",
            "Script": "abc",
            "active": true,
            "winner": true,
            "icon": "abc"
          }];

opr-script-list-panel

的组件文件
import './oprScriptListPanel.template.html';

var oprScriptListPanelComponent = {
  templateUrl: 'oprScriptListPanel.template.html',
  bindings: {
    toolbarButtons: "<?",
    selectedItems: "@?",
    onSearch:"&?",
    items:"=?",
    data:"=ngModel",
    oprListDeleteMode:"&?",
    onDoubleClick:"&?",
    itemActions:"&?",
    itemTags:"&?"
  }
};

export default oprScriptListPanelComponent;

模板文件 -

<div>
    <opr-toolbar
    buttons="$ctrl.toolbarButtons"
    selected-items="$ctrl.selectedInstructions"
    filter-placeholder="Filter instructions"
    on-search="$ctrl.filterExternalInstructionsChanged(text)"
    show-first-separator="true">
    </opr-toolbar>
  </div>

  <div class="empty-info"  ng-if="$ctrl.externalInstructionsFiltered && !$ctrl.externalInstructionsFiltered.length">
    <p ng-bind=":: 'opr.external.instructions.emptyList' | oprL10n"></p>
  </div>
  {{$ctrl.externalInstructionsFiltered}}
  {{$ctrl.selectedInstructions}}

我没有收到{{$ctrl.externalInstructionsFiltered}}的任何数据,但是如果我打印{{$ctrl.toolbarButtons"}}我就能看到一些数组。我检查模块参考是否正确。我没有收到任何错误。

0 个答案:

没有答案