ホームページ > ウェブフロントエンド > jsチュートリアル > テンプレートビューとAngularJSの間の競合の解決策

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

高洛峰
リリース: 2016-12-05 17:01:02
オリジナル
1594 人が閲覧しました

この記事の例では、テンプレート ビューと 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>
ログイン後にコピー


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート