Django response for angular $http not rendered as angularjs elements

Question

I select an option from dropdown menu. The event handler is called successfully wherein I request for a new page asynchronously using $http GET method of angular.

 <script>
      function fun1($scope, $http){
        $scope.options="options"
        $scope.option1="option1"
        $scope.onChangeHandler=function(arg1){
          $http({
            method: 'GET',
            url: "/someurl"
          }).then(function successCallBack(responsedata){
              $scope.response = responsedata.data
            },function errorCallBack(response){
              alert("Error!");
          });
        }

        var myApp = angular.module("myApp", [ngSanitize]);
        myApp.controller("fun1", fun1);
        myApp.config(function($interpolateProvider){
          $interpolateProvider.startSymbol("[[")
          $interpolateProvider.endSymbol("]]")
        });         
      }
</script>

<body ng-app="myApp" ng-controller="fun1">
  <div>
    <select class=target id="option" ng-model="options", ng-change="onChangeHandler(options);">
      <option ng-model="option1">Option1</option>
    </select>
    <div id=result ng-bind-html="response"></div>
  </div>
</body>

Response page again has some angular elements like a table with ng-repeat etc.

<script>
          function fun1($scope, $http){
            $scope.data=[{name: 'name1', age: 20}, {name: 'name2', age: 25}];
          }

            var myApp = angular.module("myApp", []);
            myApp.controller("fun1", fun1);
            myApp.config(function($interpolateProvider){
              $interpolateProvider.startSymbol("[[")
              $interpolateProvider.endSymbol("]]")
            });
</script>

<body ng-app="myApp">
  <div ng-controller="fun1">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="usr in data">
          <td>[[usr.name]]</td>
          <td>[[usr.age]]</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Sent this reponse using django render method:-
```
 return render(request, someurl.html)
```

4.Response returned successfully but rendered as plain test in a target div. That includes even [[**]] expressons of angular as below:-

Name    Age
[[usr.name]]    [[usr.age]]

Configured expression syntax from {{...}} to [[...]] intentionally to avoid conflict with django template tags.

Q1. Why angular not working in response? No error on chrome dev console but actual values in table not populated. What concept I'm missing?
Q2. What other options are there to render angular response similar to ng-bind-html.

Please show the relevant code, if you're not able to show the exact code you're using then create an minimal reproducible example, Describe what "not working" means - errors? invalid results? — Sayse
– Sayse, Commented Jul 11, 2016 at 6:28
Shouldn't it be {{ usr.name }} and {{ usr.age }} instead of [[...]] in the HTML code? — Chinni
– Chinni, Commented Jul 11, 2016 at 11:05
changed it to avoid conflicts with django template tags. myApp.config(function($interpolateProvider){ $interpolateProvider.startSymbol("[[") $interpolateProvider.endSymbol("]]") }); — NightFurry
– NightFurry, Commented Jul 11, 2016 at 11:07
Ohk. Understood. I find an extra } in the end of the second <script> tag. Is it a typo or you have it extra in your code? Also, the brackets are not properly opened and closed in the first <script> tag code. Please check that. — Chinni
– Chinni, Commented Jul 11, 2016 at 11:18

fewcodes · Accepted Answer · 2018-01-17 05:02:14Z

1

{% verbatim %}
<div ng-app="myApp" ng-controller="myCtrl">
    <p>Username is {{ Data.username }}</p>
</div>
{% endverbatim %}

JAVASCRIPT CODE

<script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope, $http) {

        $scope.name = "Test"
        $http({
            method: "GET",
            url: url
        }).then(function mySucces(response) {
            $scope.Data = response.data;
        }, function myError(response) {
            $scope.Data = response;
        });
    });
</script>

answered Jan 17, 2018 at 5:02

fewcodes

3311 gold badge2 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django response for angular $http not rendered as angularjs elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related