0

  1. 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>

  2. 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>

  3. 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]]
  1. 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.

Community
  • 1
  • 1
NightFurry
  • 358
  • 1
  • 17
  • 1
    Please show us some code. – Chinni Jul 11 '16 at 06:14
  • Please show the *relevant* code, if you're not able to show the exact code you're using then create an [mcve], Describe what "not working" means - errors? invalid results? – Sayse Jul 11 '16 at 06:28
  • Shouldn't it be `{{ usr.name }}` and `{{ usr.age }}` instead of `[[...]]` in the HTML code? – Chinni Jul 11 '16 at 11:05
  • 1
    changed it to avoid conflicts with django template tags. myApp.config(function($interpolateProvider){ $interpolateProvider.startSymbol("[[") $interpolateProvider.endSymbol("]]") }); – NightFurry Jul 11 '16 at 11:07
  • Ohk. Understood. I find an extra `}` in the end of the second ` – Chinni Jul 11 '16 at 11:18
  • not extra. Its associated with fun1. Could be bad at formatting. The page someurl.html loads well on browser stand alone. Problem occurs if I render it after returning it as response. – NightFurry Jul 11 '16 at 11:24
  • Can you please check the code you posted in the question once again? I just copied your code and it is throwing me an error because of that extra `}`. Just want to make sure if it is the actual problem or just a typo when posting the question. – Chinni Jul 11 '16 at 11:27
  • @Chinni code sorted – NightFurry Jul 11 '16 at 17:23
  • @NightFurry can you post your django views? – vikas0713 Jul 11 '16 at 17:24
  • @VikasVerma bro its just a single liner return statement as mentioned above. – NightFurry Jul 11 '16 at 17:29
  • @NightFurry can you show the output of response by using console.log(response) ? – vikas0713 Jul 11 '16 at 17:31
  • @VikasVerma sure, i'll. need some time, may be tomorrow. out of few resource at the moment. What I remember.. alert(response.data) popped up whole html page as it is including [[..]] tags. – NightFurry Jul 11 '16 at 17:57
  • @NightFurry Got it, you are expecting the response as in "json" format but the response you are getting is in HTML format , is that the issue? That's why you're not able to get the user data , that you are expecting in your code, correct me if I'm wrong. – vikas0713 Jul 11 '16 at 18:04

1 Answers1

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>
Digi Quore
  • 291
  • 1
  • 2
  • 18