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

更新時(shí)間：2016年11月22日 11:00:09 作者：栁羅風(fēng)塵

這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下

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

問題：

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

傳遞一些數(shù)據(jù)給模板：

如：

這里是某個(gè) controller

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

這里是對(duì)應(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ù)存儲(chǔ)在變量里，然后再通過
$scope對(duì)其進(jìn)行賦值，ok

第二種解決方案(推薦)：

我們使用ng-if屬性解決我們的問題，對(duì)于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/

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
深入理解Angularjs 臟值檢測
這篇文章主要介紹了深入理解Angularjs 臟值檢測，詳細(xì)的介紹了臟值檢測的原理和實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
monaco?editor在Angular的使用詳解
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
淺析webapp框架AngularUI的demo
這篇文章主要介紹了淺析webapp框架AngularUI的demo以及對(duì)demo的簡單修改，需要的朋友可以參考下
2014-12-12
angular實(shí)現(xiàn)表單驗(yàn)證及提交功能
這篇文章主要為大家詳細(xì)介紹了angular實(shí)現(xiàn)表單驗(yàn)證及提交功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
AngularJS 2.0入門權(quán)威指南
這篇文章主要介紹了AngularJS 2.0入門權(quán)威指南的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
angularjs中的單元測試實(shí)例
這篇文章主要介紹了angularjs中的單元測試實(shí)例,本文主要說說利用karma和jasmine來進(jìn)行ng模塊的單元測試,需要的朋友可以參考下
2014-12-12
Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2018-05-05
Angular搜索場景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下
2018-05-05