Such a problem, <form> loading get with a request, comes the html code and I append to the dom . But it does not execute (submit). How to tie it to an angular, let's say, or define it to work?
The form, only immediately inserted into the page (for the test) works.

 var promise = mainService.getRegisterForm(); if($location.absUrl() == absUrl + 'register'){ promise.then(showRegisterForm); } function showRegisterForm(data){ elReg.append(data.data); } <form class="form-horizontal" ng-submit="submit()" ng-controller="mainCtrl" novalidate> <div class="row"> <div class="col-md-12"> <div class="btn-group" data-toggle="buttons"> <div class="col-md-5 col-sm-6"> <label class="btn btn-primary btn-radio active" onclick="$('#infoBlockReg').html($(this).find('.info-block').html())"> <input type="radio" checked name="type" id="entity" value="entity"> {{ $data['user']['type']['entity']['title'] }} <span class="hidden info-block"> Π’Ρ‹ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ΡΡŒ ΠΊΠ°ΠΊ физичСскоС Π»ΠΈΡ†ΠΎ </span> </label> </div> <div class="col-md-5 col-md-offset-2 col-sm-6 col-sm-offset-0"> <label class="btn btn-primary btn-radio" onclick="$('#infoBlockReg').html($(this).find('.info-block').html())"> <input type="radio" name="type" id="individual" value="individual"> {{ $data['user']['type']['individual']['title'] }} <span class="hidden info-block"> Π’Ρ‹ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ΡΡŒ ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚Π΅Π»ΡŒ ΡŽΡ€ΠΈΠ΄ΠΈΡ‡Π΅ΡΠΊΠΎΠ³ΠΎ Π»ΠΈΡ†Π°, ИП, КЀΠ₯ </span> </label> </div> </div> <p class="text-center" id="infoBlockReg"> Π’Ρ‹ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ΡΡŒ ΠΊΠ°ΠΊ физичСскоС Π»ΠΈΡ†ΠΎ </p> </div> </div> <div class="row"> <div class="col-md-12"> <p>{{ $data['user']['type']['entity']['header'] }}</p> {{ csrf_field() }} <input type="hidden" name="type" value="entity"> <div class="form-group{{ $errors->has('first') ? ' has-error' : '' }}"> <label for="first" class="col-md-4 col-sm-3 control-label">{{ $data['user']['type']['entity']['fillable']['first'] }}</label> <div class="col-md-6 col-sm-7"> <input ng-model="commentData.first" type="text" class="form-control" name="first" placeholder="Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π’Π°ΡˆΠ΅ Имя" value="{{ old('first') }}" required/> </div> <div class="col-md-2 col-sm-2"> @if ($errors->has('first')) <span class="help-block"> {{ $errors->first('first') }} </span> @endif </div> </div> <div class="form-group{{ $errors->has('last') ? ' has-error' : '' }}"> <label for="last" class="col-md-4 col-sm-3 control-label">{{ $data['user']['type']['entity']['fillable']['last'] }}</label> <div class="col-md-6 col-sm-7"> <input ng-model="commentData.last" type="text" class="form-control" name="last" placeholder="Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π’Π°ΡˆΡƒ Ѐамилию" value="{{ old('last') }}" required/> </div> <div class="col-md-2 col-sm-2"> @if ($errors->has('last')) <span class="help-block"> {{ $errors->first('last') }} </span> @endif </div> </div> <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}"> <label for="email" class="col-md-4 col-sm-3 control-label">{{ $data['user']['type']['entity']['fillable']['email'] }}</label> <div class="col-md-6 col-sm-7"> <input ng-model="commentData.email" type="email" class="form-control" name="email" placeholder="example@example.com" value="{{ old('email') }}" required/> </div> <div class="col-md-2 col-sm-2"> @if ($errors->has('email')) <span class="help-block"> {{ $errors->first('email') }} </span> @endif </div> </div> <div class="form-group{{ $errors->has('curator') ? ' has-error' : '' }}"> <label for="curator" class="col-md-4 col-sm-3 control-label">{!! $data['user']['type']['entity']['fillable']['curator'] !!}</label> <div class="col-md-6 col-sm-7"> <input type="text" class="form-control" name="curator" placeholder="" value="{{ old('curator') }}"> </div> <div class="col-md-2 col-sm-2"> @if ($errors->has('curator')) <span class="help-block"> {{ $errors->first('curator') }} </span> @endif </div> </div> {{--<div class="form-group{{ $errors->has('check') ? ' has-error' : '' }}"> <div class="col-md-4 col-sm-3"> <input type="submit" class="btn btn-primary form-control" value="ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄"> </div> <div class="col-md-6 col-sm-7 col-md-offset-0 col-sm-offset-0"> <input type="text" class="form-control" name="check" placeholder="" value="{{ old('check') }}"> </div> @if ($errors->has('check')) <div class="col-md-2 col-sm-2"> <span class="help-block"> {{ $errors->first('check') }} </span> </div> @endif </div>--}} <div class="form-group"> <div class="col-md-6 col-sm-6 col-sm-offset-4"> <input type="submit" class="btn btn-primary form-control" value="ΠŸΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ"> </div> </div> <div class="form-group"> <div class="col-md-12"> <p style="text-align: justify; ">{!! $data['user']['type']['entity']['footer'] !!}</p> </div> </div> </div>
  • Without a minimal reproducible example, you can’t say anything, add your code to the question - Grundy
  • And how will this piece of code help you? - unrealisted
  • This one certainly does not help, you need an angular code: how does this form turn out, how is it inserted, and the html markup to which this code is applied - Grundy
  • @Grundy posted - unrealisted
  • one
    read about $ compiler docs.angularjs.org/guide/compiler - Chikiro

1 answer 1

Perhaps the easiest way to transfer everything to the directive

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.register = true; }).controller('mainCtrl', function($scope) { $scope.list = []; $scope.submit = function() { if ($scope.text) { $scope.list.push($scope.text); $scope.text = ''; } } }).directive('registerForm', function() { return { templateUrl: 'some/path/to/form' } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <register-form ng-if="register"></register-form> <script type="text/ng-template" id="some/path/to/form"> <form ng-submit="submit()" ng-controller="mainCtrl"> Enter text and hit enter: <input type="text" ng-model="text" name="text" /> <input type="submit" id="submit" value="Submit" /> <pre>list=@{{list|json}}</pre> </form> </script> </div>