angular не работает в HTML из сервера PHP

198

03 сентября 2018, 06:30

Я начинающий web-программист, не судите строго с:

Не работает angular в HTML из сервера PHP,код HTML приходит с сервера, а angular не читает свои директивы в этом куске кода к примеру: вот на сервере я отдаю HTML с angular выражением

echo "<h2>{{1+2}}</h2>";

вот frontend

app.controller('btnCtrl',function($scope,$http,$sce){
       $scope.sce = $sce;
       $scope.showBlock = function(e){ 

          $http({url:"/product/form",method:"post"}).then(
             function success(res){
               //в dataHtml хранится <h2>{{1+2}}</h2> строка из PhP
               $scope.dataHtml = res.data;
               console.log(res);
             },
            function error(res){
              console.log(res);
            });  
     }
});

вот index.html

        <div ng-controller="btnCtrl">
              <div ng-bind-html="sce.trustAsHtml(dataHtml)"></div>  
        </div>

выводится у меня что-то типа {{1+2}} а хочется что бы 3

думал может есть какая нибудь функция в angular на такой случай. Функция которая говорит: angular!!! смотри у тебя появились еще выражения прочти их! и он такой Ок бро и выводит 3 вместо {{1+2}} ))))

angularjs/1.7.2 всё на фрэймврке Yii2 .

надеюсь вопрос понятный )

Answer 1

Вам для этого надо сообщить анугляру, что пришел текст с выражением и его надо обрабатывать. Для этого существует $compile сервис.

Пример.

angular 
  .module("myModule", []) 
  .controller("myController", ['$scope', '$compile', function($scope, $compile) { 
    $scope.txt = "<b>result = {{1+2}}</b>"; 
    $scope.submit = function() { 
      var html = $compile($scope.txt)($scope); 
      var $elem =  angular.element(display); 
      $elem.empty(); 
      $elem.append(html); 
    } 
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myModule"> 
  <div ng-controller="myController"> 
    <textarea ng-model="txt"></textarea> 
    <input type="button" value="submit" ng-click="submit()" /> 
    <div id="display"></div> 
  </div> 
</body>

P.S. Хоть данный ответ и решает вашу проблему, то что вы хотите сделать, делается в ангуляре совсем не так. Что бы показать блок, не надо запрашивать html у сервера. Данный html должен загружаться по роутингу как компонент или уже быть на странице.