模板视图和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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
十天学会php之第八天
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python实现图片插入文字
2019/11/26 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
RealTek面试题
2016/06/28 面试题
大专生自荐信
2013/10/04 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
小学语文复习计划
2015/01/19 职场文书
学习与创新自我评价
2015/03/09 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript