模板视图和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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
JavaScript简介
Feb 15 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
vue-router 控制路由权限的实现
Sep 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 ajax 静态分页过程形式
2011/09/02 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
9个比较实用的php代码片段
2016/03/15 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python私有属性和方法实例分析
2015/01/15 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python post请求实现代码实例
2020/02/28 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
党员个人思想汇报
2013/12/28 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
五一活动标语
2014/06/30 职场文书
土建施工员岗位职责
2014/07/16 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
话题作文之呼唤
2019/12/18 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
bose降噪耳机音能消除人声吗
2022/04/19 数码科技