通过 $resource 加载模型时运行角度自定义指令答案

【问题标题】：Running angular custom directive when model gets loaded via $resource通过 $resource 加载模型时运行角度自定义指令
【发布时间】：2015-10-08 08:48:40
【问题描述】：

我在使用 Angular 自定义指令时遇到以下问题。我有一个充满输入元素的模式对话框。这些输入元素使用像这样的 ng-repeat 角度指令填充

            <div ng-repeat="item in params">
                <label>{{item.nombre}}{{item.valor}}</label>
                <div class="input-group" ng-if="item.tipo=='DATE'">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <input  type="text" name="{{item.nombre}}" class="form-control reportesFechas" ng-model="item.valor"
                            data-custom-datepicker data-date-format="dd/mm/yy" id="{{item.nombre}}">
                </div>
            </div>

data-custom-datepicker 是我的自定义属性。 params 模型通过像这样对 java 后端的服务调用来填充

         appbsReportsParamsService.query({
            q: "idReport="+id
        }, function(data){
            $scope.params = data.content;
        })

服务调用工作正常，因为最终生成的 HTML 在输入方面是“正确的”。但是 data-custom-datepicker 没有得到应用。这是正在生成的 HTML“ng-repeat”部分：

<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    <input type="text" name="fecDesde" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecDesde">
</div>
<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    <input type="text" name="fecHasta" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecHasta">
</div>

所以基本上我想知道如何在异步服务调用后应用指令来填充模型。

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

尝试在 $scope.params = data.content 之后的服务成功调用中添加 $scope.$apply()。

因为您的参数服务查询在 Angular 中的 $scope 之外运行，所以执行 $apply 将强制更新 $scope。

看看有没有帮助。

appbsReportsParamsService.query({
  q: "idReport="+id
}, function(data){
  $scope.params = data.content;
  $scope.$apply();
});

【讨论】：

【解决方案2】：

好的，问题是我在“编译”阶段运行指令代码。我将其更改为“发布”阶段，现在一切正常。问题在于 Angular 工作流程（不是问题，而是我的误解所在）。这篇文章帮助我理解了。

Angular directives - when and how to use compile, controller, pre-link and post-link

【讨论】：