Question

我尝试使用Angularjs的$http方法根据用户选择获取给定的Django模板，每个模板都包含Angular指令（ng-if）以进一步过滤内容。

但是在插入模板时很好，当我检查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() {

                        }
                    );
            }
        });
    });

// ...

}

我想知道如何插入模板并使角度指令起作用？

Answer 1

问题最终与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);
 });

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

1 个答案: