模板视图和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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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删除操作实例
2015/01/21 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
javascript中join方法实例讲解
2019/02/21 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
关于毕业的广播稿
2014/01/10 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
学习保证书100字
2015/02/26 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
python神经网络编程之手写数字识别
2021/05/08 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL
React forwardRef的使用方法及注意点
2021/06/13 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS