我创建了一个使用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]
有人可以让我知道如何推迟包含的模板加载,直到模板的模态不可用。谢谢!