Angular JS: все работает нормально, но кнопки, созданные в HTML внутри компиляции не работает

Question

В моем коде все работает нормально, кроме строки HTML ниже

>  $compile('<button class="btn btn-link ng-scope" data-ng-click="Flow.GetFarePriceRule('+ start_point +','+ end_point +')">'+ $scope.fare_base_code_array[i-1].FareBasis["@attributes"].Code +'</button>');
        $timeout(() => {
          console.log($el.prop('outerHTML'))
        });

Ссылки на кнопки отображаются правильно, но когда я нажимаю на них, они не работают. Я предполагаю, что HTML не связан с angular, потому что функция в этом HTML не вызывается после нажатия.

  $scope.ptc_break = function(variable , index , key)
  {

    $scope.fbc=[];

    if (Array.isArray(variable) == false) {

                $scope.fbc.push(variable);

            }else{

                $scope.fbc = variable;

      }

    $scope.fare_base_code_array = $scope.fbc;
    $scope.temp_array = [];
    var fare_base_var = '';
    var count = 0 ;
    var comma = '';
    var start_point = 1;
    var end_point = 0;
    var fare_base_include = "";
    for (var i = 0; i <= $scope.fare_base_code_array.length; i++) {
      if (i == $scope.fare_base_code_array.length) {
        fare_base_include = "";
      }else{
        fare_base_include = $scope.fare_base_code_array[i].FareBasis["@attributes"].Code;
      }
      if ($scope.temp_array.includes(fare_base_include) == false) {
          count++;
          if (count>0) {
            comma = ",";
          }else{
            comma = '';
          }
          if (i > 0) {
            var $el = $compile('<button class="btn btn-link ng-scope" data-ng-click="Flow.GetFarePriceRule('+ start_point +','+ end_point +')">'+ $scope.fare_base_code_array[i-1].FareBasis["@attributes"].Code +'</button>')($scope);
            $timeout(() => {
              console.log($el.prop('outerHTML'))
            });
            fare_base_var = fare_base_var + $el.prop('outerHTML') + comma;
          }
          start_point = end_point + 1;
          setTimeout(function() {
              delayFunction1();
            }, 1000);



        function delayFunction1(){
          // if (key == 0) {//$('#fare_base_'+index).html(fare_base_var);
          //   el = document.getElementById('#fare_base_'+index);
          //   angular.element(el).append( $compile(fare_base_var)($scope) )
          // }
          if (key == 0) {$('#fare_base_'+index).html(fare_base_var);}
          if (key == 1) {$('#private_fare_base_'+index).html(fare_base_var);}
          if (key == 2) {$('#fare_base_best_buy_'+index).html(fare_base_var);}
          if (key == 3) {$('#private_fare_base_best_buy_'+index).html(fare_base_var);}
          if (key == 4) {$('#fare_base_alternative_'+index).html(fare_base_var);}

        }

      }
      if (i != $scope.fare_base_code_array.length) {
      $scope.temp_array.push($scope.fare_base_code_array[i].FareBasis["@attributes"].Code);
      }
      end_point++;


    }

  }

и это функция, которую я вызываю ..

$scope.GetFarePriceRule = function(start , end_number){
  alert("hello");
  $scope.price_rule_para = "";
  $('#private_fare_base_'+index)
    alert(start);
    alert(end_number);
    $('#myModal2').modal('show');
    $scope.select_traveler_type = $scope.send_passenger_type;
        $( ".rule_modal_loader" ).addClass( "loader" );
        var url = base_url+"/start_soap_fare_price_rule_workflow.php";
        $scope.getfarerules = {
            'ItneraryNo': $scope.pnr_number,
            'FlightSegment': $scope.send_pasenger_segment,
            'PassengerType': $scope.send_passenger_typee,
            'rule_passenger_type': $scope.rule_passenger_type ,
            'FareType': "Public",
            'carrier_code': null,
            'kind_of_fare' : "retain",
            'start_point':start,
            'end_point':end_number
        };

        $http({
            method: 'POST',
            url: url,
            data: $.param($scope.getfarerules),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(response) {
            console.log(response);
            var myar = response.RulesFromPriceRS.FareRuleInfo.Rules.Paragraph.Text.replace(/-/g, "");

            var myarr = myar.split(".");

            $scope.price_rule_para = myarr;


            $('#Price_head').show();
            $('#Price_itinerary_table').show();
            $('#price_itinerary_btn').hide();
            $('#Issue_air_ticket_btn').show()
            $( ".rule_modal_loader" ).removeClass( "loader" );


        }).error(function(response) {
            console.log(response);
            alert(response);
            alert("error");
            alert('This is embarassing. An error has occured. Please check the log for details');
        });

        };

Пожалуйста, помогите мне выйти из ситуации

Answer 1

outerHtml возвращаемая строка, простая строка. Таким образом, вы отбрасываете все привязки. Это не сработает:

var $el = $compile...
vat html = $el.prop('outerHTML')
someElement.html(html);

Это будет:

var $el = $compile...
someElement.append($el);

P.S. Я вижу, что вы поклонник Jquery, но лучше вообще не используйте его в проектах Angular.