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);
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>
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>
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>