模板視圖和AngularJS之間衝突的解決方法

本文實例講述了模板視圖和AngularJS之間衝突的解決方法。分享給大家參考，具體如下：

問題：

在php的mvc視圖中，我們需要在載入的過程中

傳遞一些資料給範本：

如：

這裡是某個controller

$data['users'] = {something from databases};
$this->load->view('home/index',$data);

   

這裡是對應的視圖

<div ng-controller="loadData">
   <ul>
    <!--1. 初始化的时候我们需要使用下面这句-->
    <?php foreach(users as user):?>
    <li><?=$user->name?>:<?=$user->email?><li>
    <?php endforeach?>
    <!--2. 但是结束后 我们需要使用这句 通过ajax 更新 -->
    <li ng-repeat="user in users">{{user.name}}:{{user.email}}</li>
  </ul>
</div>

   

那麼現在問題來瞭如何處理1 和2 之間的矛盾？

第一個解決方案：

<script>
 var usersPrefetch = [
  <?php foreach(users as user):?>
  {"name": "<?=$user->name?>", "email": "<?=$user->email?>"},
  <?php endforeach?>
 ];
</script>

   

第一個解決方案：

<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>

   

第一個解決方案：
rrreee

   

第一個解決方案：

rrreee

   

我們將php傳過來的資料儲存在變數裡，然後再透過

$scope進行賦值，ok

第二種解決方案

我們使用ng-if屬性來解決我們的問題，對於users未定義時調用php資料🎜ajax傳遞完成後使用我們的資料並定義$scope.users🎜rrreee🎜   🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜