使用ajax加載包含Angularjs指令的Django模板

我試圖使用Angularjs的$http方法根據用戶選擇獲取給定的Django模板，每個模板都包含Angular指令（ng-if）以進一步過濾內容。使用ajax加載包含Angularjs指令的Django模板

但是，雖然模板插入的很好，我可以看到指示，當我檢查的HTML，過濾並不實際發生。當我有模板插入控制檯日誌時，他們無法找到$scope變量，這些變量只能在插入模板的上方和下方進行訪問。

一個模板，我將看起來像這樣：

<div class="data_point_popup"> 
    {% if id in values_dict %} 
     {% if values_dict|get_item:id|get_item:"not_applicable" == True %} 
      n/a 
     # ... 
     {% else %} 
      {% if id in definitions_dict %} 
       {% if definitions_dict|get_item:id|get_item:"data_type" == "Integer" %} 
        {{ values_dict|get_item:id|get_item:"value"|floatformat:0 }} 
       {% elif definitions_dict|get_item:id|get_item:"data_type" == "Currency" %} 
        <div class="currency eur" ng-if="Page.getCurrencySelection() === 'eur'">€{{ values_dict|get_item:id|get_item:"value_json"|get_item:"eur_value"|floatformat:2 }}</div> 
        <div class="currency gbp" ng-if="Page.getCurrencySelection() === 'gbp'">£{{ values_dict|get_item:id|get_item:"value_json"|get_item:"gbp_value"|floatformat:2 }}</div> 
        <div class="currency usd" ng-if="Page.getCurrencySelection() === 'usd'">${{ values_dict|get_item:id|get_item:"value_json"|get_item:"usd_value"|floatformat:2 }}</div> 
        <div class="currency base" ng-if="Page.getCurrencySelection() === 'base'">Base:{{ values_dict|get_item:id|get_item:"value_json"|get_item:"base_value"|floatformat:2 }}</div> 
        <script>console.log(Page.getCurrencySelection())</script> 
       # ... 
      {% else %} 
       <span style="color: red;">ERROR-NO_DEFINITION</span> 
       <script>console.warn("Unable to find definition for data point {{ id }}.");</script> 
      {% endif %} 
     {% endif %} 
    {% else %} 
     - 
    {% endif %} 
</div>

而且我的控制器看起來像：

function CompaniesDetailTabController($scope, $http, $sce, yearFrom, yearTo) { 
// ... 

    angular.element(document).ready(function() { 
     $("#accordion-"+$scope.data_point_section_id).accordion({ 
      onOpening: function() { 
       $scope.currentYear = this.attr("data-accordion"); 
       $scope.accordions = {}; 
        $scope.loading = true; 
        $scope.url = Urls["companies_detail_tab_with_year"] 
        $http({ 
         "method": "GET", 
         "url": $scope.url 
        }).then(
         function(response) { 
          $scope.loading = false; 
          $scope.accordions[$scope.currentYear] = $sce.trustAsHtml(response.data); 
         }, 
         function() { 
          $scope.accordions[$scope.currentYear] = $sce.trustAsHtml(Page.getGeneralError()); 
          $scope.errorCallback(); 
         }, 
         function() { 

         } 
        ); 
      } 
     }); 
    }); 

// ... 

}

我想知道我怎麼可以插入模板，並有角指令功能？

來源

2017-02-13 JKiely

我不確定你是否正確使用AngularJS和Django。您應該使用其中一種渲染視圖，而不是兩種。就我個人而言，我將使用AngularJS來呈現視圖，並讓Django通過JSON提供需要在這些視圖內顯示的實際內容。 – themanatuf

這個問題最終與Django模板沒有任何關係，這是一個嘗試將包含Angular指令的html直接插入到頁面中的常見問題。我需要做的是在插入它之前對$compile模板。像這樣：

function(response) { 
    var tab = $("div[data-tab='" + tabPath + "']"); 
    var template = angular.element(response.data); 
    var link = $compile(template); 
    var element = link($scope); 
    tab.append(element); 
});

來源

2017-03-01 18:11:42 JKiely

使用ajax加載包含Angularjs指令的Django模板

回答

相關問題