模板视图和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类库D
Oct 24 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
vue的mixins属性详解
Mar 14 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
jquery实现聊天机器人
Feb 08 jQuery
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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 smarty模板引擎的6个小技巧
2014/04/24 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python threading多线程编程实例
2014/09/18 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
采购员岗位职责
2013/11/15 职场文书
幼儿园门卫制度
2014/01/29 职场文书
公司中秋节活动方案
2014/02/12 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
面试通知单大全
2015/04/20 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
Python实现自动玩连连看的脚本分享
2022/04/04 Python