ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法

wp-admin

10年前

Bootstrap3を使って作成したナビゲーションメニューをAngularJSを使う形で変更する方法をまとめました。

ブートストラップ３でナビゲーションメニューを作る方法は下記参照。
ブートストラップ３を使って自作テーマ作成（１１）WordPressのメニュー画面でナビゲーションメニューを設定
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．WordPressのテーマにAngularJSを導入
２．ナビゲーションメニューをAngularJS対応に変更

WordPressのテーマにAngularJSを導入

１）AngularJSとBootstrap3を共存するには？
　
上記参考記事で作成したナビゲーションメニューでは、ドロップダウンメニューなどの機能でBootstrap3のJavaScript機能を使用しています。
　
AngularJSを導入するとBootstrap3のJavaScriptのコードと干渉してしまうようで、AngularJSとBootstrap3を共存する場合は下記ツールを導入すると良いようです。
http://angular-ui.github.io/bootstrap/
　
２）header.phpのインクルード設定を変更
　
・jqueryは、WordPress同梱のものは使わない。
・AngularJSをインクルード
・AngularJSとBootstrap3を同梱させるツールui-bootstrap-tpls-0.9.0.min.jsをインクルード
・ナビゲーションメニュー用でAngularJSで記述したファイル（ang.js）をインクルード（ang.jsの内容は（２）参照）
　

<?php wp_deregister_script('jquery'); ?>
<?php wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'); ?>
<?php wp_enqueue_script('angular-script', get_template_directory_uri() . '/js/angular.min.js') ?>
<?php wp_enqueue_script('ui-bootstrap-script', get_template_directory_uri() . '/js/ui-bootstrap-tpls-0.9.0.min.js'); ?>
<?php wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/ang.js'); ?>

　
３）header.phpの<html>タグにng-appの記述追加
　
ここでは、モジュール名を”MyApp”としています。
<html ng-app=”MyApp” <?php language_attributes(); ?>>

ナビゲーションメニューをAngularJS対応に変更

ナビゲーションメニュー部に”collapse”コンポーネントを使用されていますが、Bootstrap3とAngularJS対応で記述の仕方が異なるので下記オンラインマニュアルを参照して変更しました。
http://angular-ui.github.io/bootstrap/#/collapse
　

（header.php）
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div ng-controller="CollapseDemoCtrl">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse" collapse="isCollapsed">
    <?php wp_nav_menu( array('theme_location' => 'primary',
          'menu_class' => 'nav navbar-nav',
          'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
          'walker' => new wp_bootstrap_navwalker()
    ) );?>
    </div>
    </div>
  </div><!-- /.container -->
</div><!-- /.navbar -->

（JavaScript　ang.js）
var myApp = angular.module('MyApp', ['ui.bootstrap']);

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = true;
}