模板视图和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全部源代码
May 04 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 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 模板高级篇总结
2006/12/21 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
解析vue中的$mount
2017/12/21 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
详解Vite的新体验
2021/02/22 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
北京大学自荐信范文
2014/01/28 职场文书
民族团结先进个人材料
2014/02/05 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL