在控制器提供模型之前加载包含的模板 - Angular

时间:2016-04-12 12:58:55

标签: javascript html angularjs

我创建了一个使用vanilla javascript / html / css的基本工具,可以在与业务相关的所有电子邮件中执行某些功能。为了保持代码库的简单性,我已经开始使用angularJS移植应用程序,创建模块/控制器等。但是,我遇到了以下情况。在从控制器准备好数据之前,从日志中看起来我的包含的html模板被调用了。

我正在从服务器发出ajax调用,大约需要1秒钟。但到时候,我猜Angular会执行包含的模板,并且由于没有模型可用性,它在应用程序端没有呈现任何内容。

查看我的代码:

的index.html

<div class="tab-pane active fade in" id="results">
        <section ng-controller = "messageSelectionController" ng-include src="'templates/messageSelectionTemplate.html'"></section>
</div>

messageSelectionController.js

app.controller('messageSelectionController',function($scope,$log){
//Generic ajax call
var makeRequest = function(paramObj,successCallback,errorCallBack,url,type){
$.ajax({
     method : type ? type : "GET",
     url : url ? url : "https://xx.xx.xx/xx/xx",
     data : paramObj,
     xhrFields : { withCredentials : true }
   }).then(successCallback,errorCallBack);
};

var messageSelectionSuccessHandler = function(data){
    $scope.messageselectionlist = JSON.parse(data).response.docs;
    $log.info($scope.messageselectionlist);
};

var messageSelectionErrorHandler = function(data){
    $log.info(data.responseText);
};

var data = {
   q : "",
   fq:[
      'View:xx',
      'Platform:xx'
   ],
   start : 0,
   rows : 9999
};

makeRequest(data, messageSelectionSuccessHandler,messageSelectionErrorHandler);
});

messageSelectionTemplate.html

 <ul>
  <li ng-repeat="item in messageselectionlist">
    <article class="">
      <span class="label label-success">MessageSelection</span>
      <a> "Platform : {{item.Platform}} | View : {{item.View}} | Locale : {{item.Locales[0]}}"
        <i class = "ocon-flag-{{item.Locales[0] | lowercase }}"></i>
      </a>
      <span class = "label label-inverse">{{item.Description}}</span>
    </article>
 </li>
</ul>

我尝试将日志放入加载messageSelectionTemplate的时间,使用下面的代码:

$scope.$on('$includeContentLoaded', function(event, target){
   console.log(event);  //this $includeContentLoaded event object
   console.log(target); //path to the included resource, 'snippet.html' in this case
});

这是日志:

-----templates/messageSelectionTemplate.html  angular.js:13424
-----Array[654]

有人可以让我知道如何推迟包含的模板加载,直到模板的模态不可用。谢谢!

0 个答案:

没有答案