本文實(shí)例講述了模板視圖和AngularJS之間沖突的解決方法。分享給大家供大家參考,具體如下:
問題:
在php的mvc視圖中,我們需要在加載的過程中
傳遞一些數(shù)據(jù)給模板:
如:
這里是某個(gè) controller
$data['users'] = {something from databases};$this->load->view('home/index',$data);
這里是對應(yīng)的視圖
<div ng-controller="loadData"> <ul> <!--1. 初始化的時(shí)候我們需要使用下面這句--> <?php foreach(users as user):?> <li><?=$user->name?>:<?=$user->email?><li> <?php endforeach?> <!--2. 但是結(jié)束后 我們需要使用這句 通過ajax 更新 --> <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li> </ul></div>
那么現(xiàn)在問題來了 如何處理 1 和 2 之間的矛盾?
第一種解決方案:
<script> var usersPrefetch = [ <?php foreach(users as user):?> {"name": "<?=$user->name?>", "email": "<?=$user->email?>"}, <?php endforeach?> ];</script>
我們將 php傳過來的數(shù)據(jù)存儲在變量里,然后再通過
$scope對其進(jìn)行賦值,ok
第二種解決方案(推薦):
我們使用ng-if屬性解決我們的問題,對于users未定義時(shí)調(diào)用php數(shù)據(jù)
ajax傳遞完成后使用我們的數(shù)據(jù)并定義 $scope.users
<ul ng-if="!users"> <?php foreach(users as user):?> <li><?=$user->name?>:<?=$user->email?><li> <?php endforeach?></ul><ul ng-if="users"> <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li></ul>
demo演示地址:https://jsfiddle.net/mser49aq/1/
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答