Access form during component initialization in angularjs -
i have component following :
.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' });
the template url :
<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>
in controller i'm trying access form following :
function oninitcomponent() { //... console.log($scope[slink.linkformname]); //... }
but undefined
.
in other hand, changeitem
function, triggers after made change on component it's defined.
how can access form when initilize component ?
as discussed in this thread can use $postlink()
lifecycle hook access form in components controller, since called after controller's element , children have been linked can sure form
initialized. see example below:
(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 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>
Comments
Post a Comment