Home > Web Front-end > JS Tutorial > Solution to conflict between template views and AngularJS

Solution to conflict between template views and AngularJS

高洛峰
Release: 2016-12-05 17:01:02
Original
1620 people have browsed it

The examples in this article describe how to resolve conflicts between template views and AngularJS. Share it with everyone for your reference, the details are as follows:

Problem:

In the mvc view of php, we need to

pass some data to the template during the loading process:

For example:

Here is a controller

$data['users'] = {something from databases};
$this->load->view('home/index',$data);
Copy after login

Here is the corresponding view

<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>
Copy after login

So now the question is how to deal with the contradiction between 1 and 2?

The first solution:

<script>
 var usersPrefetch = [
  <?php foreach(users as user):?>
  {"name": "<?=$user->name?>", "email": "<?=$user->email?>"},
  <?php endforeach?>
 ];
</script>
Copy after login

We store the data passed by php in variables, and then assign it through
$scope, ok

The second solution (recommended):

We use the ng-if attribute to solve our problem, calling php data when users is undefined
After the ajax transfer is completed, use our data and define $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>
Copy after login


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template