模板视图和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); 这里是对应的视图 : {{user.name}}:{{user.email}} 那么现在问题来了 如何处理 1 和 2 之间的矛盾? 第一种解决方案: 我们将 php传过来的数据存储在变量里,然后再通过 $scope对其进行赋值,ok 第二种解决方案(推荐): 我们使用ng-if属性解决我们的问题,对于users未定义时调用php数据 ajax传递完成后使用我们的数据并定义 $scope.users : {{user.name}}:{{user.email}} 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的解决方法分析 模板 视图 AngularJS 解决方法 相关文章 angular $watch 一个变量的变化(实例讲解) 下面小编就为大家带来一篇angular $watch 一个变量的变化(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 angularJS Provider、factory、service详解及实例代码 这篇文章主要介绍了angularJS Provider详解及实例代码的相关资料,需要的朋友可以参考下 2016-09-09 AngularJS日程表案例详解 本文通过实例代码给大家介绍了AngularJS日程表案例详解,通过简单代码实现了添加事件/完成事件/删除事件功能,具体代码大家参考下本文 2017-08-08 总结十个Angular.js由浅入深的面试问题 这篇文章虽然只有10个问题,但是覆盖了angular开发中的各个方面,有基本的知识点,也有在开发过程中遇见的问题,同时也有较为开放性的问题去辨别面试者的基础水准和项目经验,注意答案仅供参考哦~ 2016-08-08 如何解决手机浏览器页面点击不跳转浏览器双击放大网页 这篇文章主要介绍了如何解决手机浏览器页面点击不跳转浏览器双击放大网页的相关资料,需要的朋友可以参考下 2016-07-07 基于AngularJs select绑定数字类型的问题 今天小编就为大家分享一篇基于AngularJs select绑定数字类型的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 解决Angular2 router.navigate刷新页面的问题 今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 Angularjs之filter过滤器(推荐) 这篇文章主要介绍了Angularjs之filter过滤器的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2016-11-11 AngularJS实现单一页面内设置跳转路由的方法 这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下 2017-06-06 Angular中的Promise对象($q介绍) 这篇文章主要介绍了Angular中的Promise对象($q介绍),本文讲解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等内容,需要的朋友可以参考下 2015-03-03 最新评论

本文实例讲述了模板视图和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的解决方法分析
张贴在3