模板视图和AngularJS之间冲突的解决方法
更新时间：2016年11月22日 11:00:09 作者：栁罗风尘
这篇文章主要介绍了模板视图和AngularJS之间冲突的解决方法,结合实例形式分析了AngularJS模板视图冲突的原因并给出了2种解决方法供大家参考使用,需要的朋友可以参考下
本文实例讲述了模板视图和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程序设计有所帮助。
您可能感兴趣的文章:
- AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
- AngularJS iframe跨域打开内容时报错误的解决办法
- AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
- AngularJS中update两次出现$promise属性无法识别的解决方法
- AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
- AngularJS实现在ng-Options加上index的解决方法
- AngularJS ng-repeat数组有重复值的解决方法
- AngularJS在IE下取数据总是缓存问题的解决方法
- AngularJS上拉加载问题解决方法
- AngularJS在IE8的不支持的解决方法
- AngularJS报错$apply already in progress的解决方法分析
相关文章
ui-router中使用ocLazyLoad和resolve的具体方法
这篇文章主要介绍了ui-router中使用ocLazyLoad和resolve的具体方法，详细的介绍了ocLazyLoad和resolve的具体用法，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了深入理解Angularjs 脏值检测，详细的介绍了脏值检测的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家介绍了monaco editor在Angular的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Angular @HostBinding()和@HostListener()用法
本篇文章主要介绍了Angular @HostBinding()和@HostListener()用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了浅析webapp框架AngularUI的demo以及对demo的简单修改，需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了angular实现表单验证及提交功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了AngularJS 2.0入门权威指南的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了angularjs中的单元测试实例,本文主要说说利用karma和jasmine来进行ng模块的单元测试,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2018-05-05
这篇文章主要介绍了Angular搜索场景中使用rxjs的操作符处理思路,主要的思路就是通过Subject来发送过滤条件，这样就可以使用rxjs的各种操作符，可以快捷很多。需要的朋友可以参考下2018-05-05
最新评论