テンプレートビューとAngularJSの間の競合の解決策

この記事の例では、テンプレート ビューと AngularJS の間の競合を解決する方法について説明します。次のように、参考のために全員と共有してください:

問題:

php の mvc ビューでは、読み込みプロセス中に

いくつかのデータをテンプレートに渡す必要があります:

例:

ここにコントローラー

$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

2 番目の解決策 (推奨):

ng-if を使用しますユーザーが未定義のときに 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>