模板视图和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 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
js控制div弹出层实现方法
May 11 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
小程序简单两栏瀑布流效果的实现
Dec 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
初中政治教学反思
2014/01/17 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
党性心得体会
2014/09/03 职场文书
入党积极分子考察意见
2015/06/02 职场文书
太行山上观后感
2015/06/05 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python