AngularJSで横スクロールメニューの実装ができましたので、今度はメニュー選択をしたら、それを画面に表示する実装を行います。
AngularJSの実装2
実現したい操作は下の通りです。
- 横スクロールメニューをクリックする
- 選択したメニューにひもづく記事一覧を取得
3, 記事一覧の書く記事のタイトル部分をクリックすることで対象の記事を開く(window.open())
以上のような実装を行いたいと思います。
現状の問題1
横スクロールの定義がルートコントローラーにしてあるので、再度コントローラーを起動すると横スクロールメニューがクリア(初期化)されてしまう。。。
これに関しては、ルートコントローラーの呼び出しを行なっても、子供コントローラーを呼び出すように実装することで回避しました。
対象方法
横スクロールメニューをクリックすると「changeView()」を呼び出すように実装していますが、これを使用して$scopeの値を変更すると横スクロールメニューがクリアされてしまうので、直接子供の画面(<div ng-view></div>で表示する画面)のコントローラーを起動するように実装しました。
＜実装＞
イベント処理の通知、受信を行うように関連付けを行いました。処理を通知(親画面から子画面)
// pgbox.js: 画面上の処理(通知もと)
$scope.changeView = function (catId) {
$scope.$broadcast('getCategoryPosts', catId);
};
からこ画面のコントローラー(siteMapCtrl.js)へイベントの通知を受け取る
/** サイトマップの表示部分コントローラー */
app.controller('siteMapCtrl',['$scope', 'SiteMapService', function($scope, SiteMapService){
$scope.title = "Hello";
const service = SiteMapService;
$scope.$on('getCategoryPosts', function(event, catId, SiteMapService) {
alert("testOn");
service.getCategoryPosts(catId).then(function(response, status, headers, config){
$scope.categories = response.data;
}), function(data, status, headers, config) {
alert(data);
};
});
}]);
上のコントローラー内で、$scope.$on('getCategoryPosts', function(event, catId) {のように"getCategoryPosts"イベントの通知を受け取ったときに処理が動くように定義しておきます。
こうすると、$bloadcastで通知されたイベントを受け取れます。
ちなみに、逆方向の処理を行うときは"emit()"を使用するようです。実装する機会があったら記載しますが、この実装はあまり多用しない方が良いように思います。
なぜかというと「どこからどこへ・・・」というのがソース上でしかわからないからです。あまり複雑になるようであれば、何かしらのマッピングを行わないと「意味わからねぇ！」となります。(その人にしかわからないコードは危険です。)
とりあえずは、ここまで実装しました。
現状のソースはGithubにアップロード(差分表示)してあります。
でわでわ。。。
」
