模板视图和AngularJS之间冲突的解决方法


Posted in Javascript onNovember 22, 2016

本文实例讲述了模板视图和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>

我们将 php传过来的数据存储在变量里,然后再通过
$scope对其进行赋值,ok

第二种解决方案(推荐):

我们使用ng-if属性解决我们的问题,对于users未定义时调用php数据
ajax传递完成后使用我们的数据并定义 $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程序设计有所帮助。

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
小程序转发探索示例
Feb 19 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 #Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 #Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 #Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 #Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 #Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 #Javascript
原生JS查找元素的方法(推荐)
Nov 22 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
js 对象是否存在判断
2009/07/15 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers