模板视图和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小实验之函数引用
Nov 17 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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/10/09 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
详解Python_shutil模块
2019/03/15 Python
python实现图片压缩代码实例
2019/08/12 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
详解python with 上下文管理器
2020/09/02 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
工程造价专业大专生求职信
2013/10/06 职场文书
大学生社会实践评语
2014/04/25 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
后备干部推荐材料
2014/12/24 职场文书
综治目标管理责任书
2015/05/11 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
TS 类型兼容教程示例详解
2022/09/23 Javascript