在angularjs中的组件初始化期间访问表单

Question

我有一个组件如下：

 .component('myLink', {
                bindings: {
                    linkEntity: '=',
                    constraints: '=?',
                    fieldName: '@',
                    standalone: '@',
                    adherence: '@',
                    searchMinLength: '<',
                    searchHandler: '&',
                    viewItemHandler: '&',
                    onSelectItemHandler: '&',
                    hiddenFields: '@',
                    formName: '@',
                    date: '<?',
                    constraintsJson: '@'
                },
                require: {
                    parent: '?^form'
                },
                templateUrl: 'my-link-component.html',
                controller: 'MyLinkController',
                controllerAs: 'slink'
        }); 

模板网址：

<ng-form name="{{slink.linkFormName}}">
    <fieldset class="link-fieldset">
        <legend>
            <md-icon>link</md-icon>
        </legend>
        <div layout="row" flex ng-if="slink.isFormLoaded">
            <md-button print-remove ng-if="!slink.constraints.readOnly" ng-click="slink.querySearch(' ')" class="md-icon-button md-primary">
                <md-icon aria-label="Tout voir">view_headline</md-icon>
                <md-tooltip md-direction="right">Afficher toute la liste de : {{slink.uiName | lowercase}}</md-tooltip>
            </md-button>
            <md-autocomplete flex ng-disabled="slink.constraints.readOnly" md-selected-item="slink.selectedItem" md-search-text="slink.searchText" md-selected-item-change="slink.changeItem(item)" md-items="item in slink.querySearch(slink.searchText)" md-min-length="1" md-no-cache="slink.noCache" md-select-on-match=true md-autoselect=true md-item-text="slink.itemToText(item)" md-input-name="{{slink.property}}" md-input-id="simple-link-component-{{slink.property}}-{{slink.autoId}}-input" md-floating-label="{{slink.floatingLabel}}" md-select-on-focus style="background: none;">
                <md-item-template>
                    <span md-highlight-text="slink.searchText === ' ' ? slink.itemToText(slink.selectedItemStore) : slink.searchText" md-highlight-flags="^i">
                    {{item.domainObjectDescription}}
                </span>
                </md-item-template>

                <md-not-found>
                    <div style="width: 100%;">{{slink.notFoundMsg}}
                    </div>
                </md-not-found>

                <div ng-messages="slink.errorMessage" ng-if="!slink.constraints.readOnly">
                    <div ng-messages-include='messages/messages.html'></div>
                </div>
            </md-autocomplete>
            <md-button print-remove ng-if="slink.standalone !== 'list' && !slink.constraints.readOnly" ng-disabled="!slink.selectedItem" class="md-icon-button md-primary" ng-click="slink.viewItem()">
                <md-icon aria-label="Voir le détail">visibility</md-icon>
                <md-tooltip md-direction="left">Voir le détail de : {{slink.uiName | lowercase}}</md-tooltip>
            </md-button>
        </div>
    </fieldset>
</ng-form>

在控制器中我试图访问表单如下：

function onInitComponent() {
   //...
   console.log($scope[slink.linkFormName]);
   //...
}

但我总是得到undefined。

另一方面，来自changeItem函数，它在我对其定义的组件进行更改后触发。

我在初学化组件时如何访问我的表单？

Answer 1

如this thread中所述，您可以使用$postLink() lifecycle hook初始访问组件控制器中的表单，因为它是在此控制器的元素之后调用的，并且它的子元素已被链接，因此我们可以确定{ {3}}已初始化。请参阅以下示例：

(function (angular) {
  'use strict';
  angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function MyCtrl($scope) {
      this.id = 1;
  }]);
})(angular);

(function (window, angular) {
  'use strict';
  var myLink = {
      bindings: {
        id: '<',
        linkFormName: '@'
      },
      templateUrl: 'my-link-component.tmpl.html',
      controller: 'MyLinkController',
      controllerAs: 'slink'
  };

  angular.module('myApp')
  .component('myLink', myLink);
})(window, angular);

(function (angular) {
  'use strict';

  angular
      .module('myApp')
      .controller('MyLinkController', MyLinkController);

  MyLinkController.$inject = ['$scope'];

  function MyLinkController($scope) {
    var slink = this;

    //component lifecycle hooks
    slink.$onInit = onInit;
    slink.$postLink = postLink;

    function onInit() {
      console.log('onInit: ', $scope[slink.linkFormName]);
    }

    function postLink() {
      console.log('postLink: ',$scope[slink.linkFormName]);
    } 
  }
})(angular);

<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl as myCtrl">    
    <my-link id="myCtrl.id" link-form-name='myLinkForm'></my-link> 
  </div> 
  <script type="text/ng-template" id="my-link-component.tmpl.html">
    <ng-form name="{{slink.linkFormName}}">
        <fieldset class="link-fieldset">
            <legend>
                <md-icon>link</md-icon>
            </legend>
        </fieldset>
    </ng-form>
  </script> 
</div>