模板视图和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 相关文章推荐
简单的js分页脚本
May 21 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
详解JavaScript 作用域
Jul 14 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
新闻内页-JS分页
2006/06/07 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
python cs架构实现简单文件传输
2020/03/20 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
会务接待方案
2014/02/27 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
监考失职检讨书
2015/01/26 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
社会实践单位意见
2015/06/05 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS