模板视图和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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
给Function做的OOP扩展
May 07 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
layui分页效果实现代码
May 19 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
小程序自定义弹框效果
Nov 16 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
js尾调用优化的实现
2019/05/23 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
PHP面试题及答案一
2012/06/18 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
学校办公室主任职责
2013/12/27 职场文书
新员工欢迎词
2014/01/12 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
班级入场式解说词
2014/02/01 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
JavaScript实现优先级队列
2021/12/06 Javascript