Question

我需要用一些数据初始化ng-include内部范围。到目前为止，我在ng-init元素本身使用ng-include，但这样评估的表达式保存在ng-include父作用域上，如果两个指令使用相同的名称，则会出现冲突

有一些方法可以解决这个问题，直到现在我已经尝试过这个：

使用虚拟ng-if强制创建新范围：

 <div ng-if="true">
      <ng-include src="'/partials/reports/chart'" ng-init="chart=getChartParams()"></ng-include>
 </div>

使用children元素初始化ng-include范围：

 <ng-include src="'/partials/reports/chart'">
                        <span ng-init="chart=getChartParams()"></span>
 </ng-include>

这个解决方案很实用，但它们很丑陋。有没有更好的解决方案？

Answer 1

您还应该能够使用具有双花括号的任意属性来评估范围上的表达式。

<ng-include src="'/partials/reports/chart'" whatever="{{chart=getChartParams()}}"></ng-include>

Answer 2

ngInclude有 onload 属性，可以满足您的需求。它的工作方式与ng-init类似，但作用于新创建的范围。

 <ng-include src="'/partials/reports/chart'" onload="chart=getChartParams()">
 </ng-include>

documentation表示onload是一个“表达式，用于评估加载新部分的时间”，但未提供有关使用情况的指导。我不知道这是否是这个属性的预期用途，但它可以解决问题。

Answer 3

我已根据原始ngInit创建了一个自定义指令，但其优先级低于ngInclude：

app.directive('init', function () {
    return {
        priority: 0,
        compile: function () {
            return {
                pre: function (scope, element, attrs) {
                    scope.$eval(attrs.init);
                }
            };
        }
    };
});

你可以像这样使用它：

<ng-include src="'/partials/reports/chart'" init="chart=getChartParams()"></ng-include>

在加载或执行内部模板的任何内容之前，init表达式将在创建ngInclude作用域之后执行。

初始化ng-include范围

3 个答案: