模板视图和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 自定义指令中的数据绑定

    详解Angularjs 自定义指令中的数据绑定

    这篇文章主要介绍了Angularjs 自定义指令中的数据绑定,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • angular学习之动态创建表单的方法

    angular学习之动态创建表单的方法

    这篇文章主要介绍了angular学习之动态创建表单的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • angular安装import echarts from‘echarts‘标红报错解决

    angular安装import echarts from‘echarts‘标红报错解决

    这篇文章主要介绍了angular安装import echarts from‘echarts‘标红报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • angularJS提交表单(form)

    angularJS提交表单(form)

    这篇文章主要介绍了angularJS提交表单(form)的方法和示例,需要的朋友可以参考下
    2015-02-02
  • Angular2从搭建环境到开发步骤详解

    Angular2从搭建环境到开发步骤详解

    本文的内容主要是想帮助那些想学习Angular2的朋友们,因为我自己在玩Angular2时碰到了不少坑,而且Angular2语法一直处于变化中,让人很头疼。不过也怪不了Anguar2,因为它现在是处于并长期处于alpha阶段,下面就通过本文来学习Angular2的搭建环境和开发吧。
    2016-10-10
  • 深入探究angular2 UI组件之primeNG用法

    深入探究angular2 UI组件之primeNG用法

    本篇文章主要介绍了深入探究angular2 UI组件之primeNG用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular实现的日程表功能【可添加及隐藏显示内容】

    Angular实现的日程表功能【可添加及隐藏显示内容】

    这篇文章主要介绍了Angular实现的日程表功能,带有向日程表中添加内容及隐藏显示内容的功能,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-12-12
  • Angular ui.bootstrap.pagination分页

    Angular ui.bootstrap.pagination分页

    这篇文章主要为大家详细介绍了Angular ui.bootstrap.pagination 分页的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • angularJs中json数据转换与本地存储的实例

    angularJs中json数据转换与本地存储的实例

    今天小编就为大家分享一篇angularJs中json数据转换与本地存储的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • angularJs中datatable实现代码

    angularJs中datatable实现代码

    本篇文章主要介绍了angularJs中datatable实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论