質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • Node.js

    2471questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • AngularJS

    613questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Express

    319questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • MongoDB

    281questions

    MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。

AngularJSでControllerの関数をHTMLから呼びたい

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 2,501

mag-chang

score 4

最近Webアプリケーションおよびjavascriptを勉強し始めました。

今回、YeomanのMEANスタックであるAngularJS Full-Stack generatorを使って
Teitter風のWebアプリケーションを作成しようとしています。

参考にしているサイトはこちらです


client/app/main/main.controller.jsで自分の投稿を判定する関数を追加し、
main.htmlの中で呼び出したいのですが、うまく呼び出せません。

  • main.controller.js
angular.module('testApp')
.controller('MainController', function ($scope, $http, socket, Auth) {
  $scope.isLoggedIn = Auth.isLoggedIn;
  $scope.getCurrentUser = Auth.getCurrentUser;
  $scope.isMyTweet = function(thing){
    return Auth.isLoggedIn() && thing.user && thing.user._id===Auth.getCurrentUser()._id;
  };
 });
})();
  • main.html
<div class="row">
    <div ng-repeat="thing in main.awesomeThings">
      {{thing.user.name}} - {{thing.name}} ({{thing.createdAt}})
      <button type="button" class="close" ng-if="isMyTweet(thing)" ng-click="main.deleteThing(thing)">&times;</button>
    </div>
</div>




上記の記述で、ng-if="isMyTweet(thing)"の部分が正しく動作していない状況です。

どなたか上記コードの問題点をご教授頂きたいです。
宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

パッと見でおかしな点というと、JavaScrptのコードの最後の一行(下記)はJavaScriptの実行エラーの原因になるような気がします。

})();

それ以外、Angularの構文としては明らかな間違いは見当たりません。
ただし、HTML側の ng-app="testApp" 宣言と、ng-controller="MainController" の宣言が正しく行われて入れているかどうか、確認されたほうが良いかとは思います。

いずれにしても、Angularのコードがうまく動かない(画面表示が不完全な状態になる、ボタンのアクションが反応しない等)場合、JavaScript実行エラーが発生していることが多いです。
ブラウザの開発者ツール画面を表示(IEやChromeではF12キーで表示される)した状態で、このページをリロードしてみると実行エラーの有無を確認できます。
また、Angular関連のJavaScript実行エラーのエラーメッセージに含まれている "http://errors.angularjs.org/..." の部分をコピーしてブラウザでここを開くと、実行エラーの発生原因に関する説明を得ることができますので、そちらの情報もご覧になってみてください。

ご参考になれば。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 23:24

    ブラウザの開発者ツール画面でのデバッグ方法を知ることができました。
    ありがとうございました。

    キャンセル

checkベストアンサー

0

<div ng-repeat="thing in main.awesomeThings">で$scopeが異なるので、
その下の要素ではisMyTweet(thing)が定義定義されていない様に思います。

{{$id}}とすると$scopeのIDが表示できますが、ngRepeatの中と外では値が違うと思います。

<button type="button" class="close" ng-if="$parent.isMyTweet(thing)" ng-click="main.deleteThing(thing)">&times;</button>
とすると、動作するかもしれませんが、$scopeを使わない方向で実装したほうがよいと思います。

具体的には、コントローラに定義してControllerAsで指定した別名でHTMLから利用するのをお勧めします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 23:23

    ご回答いただいた通り、$scopeを使用せず
    controller as にて指定したコントローラ名で呼び出したところ
    動作しました。
    ありがとうございました。

    キャンセル

0

})(); 

(js 部分の最後の一行は、転載ミスとみなしますと。。。)
該当部分の記述方法は特に間違っていないと思われます。
にもかかわらず動いていないということは、他の箇所に問題の原因があると思われます。

  1. main.controller.js を読み込んでいるかどうか
  2. main.controller.js の文法エラーが発生していないか
  3. ng-controller の記述が行われていない
  4. HTML の記述ミス(&ブラウザによる自動補完)により DOM 構造が壊れてしまい、ng-controller の影響範囲から外れてしまっている

…… 等。

あと、とりあえず、isMyTweet 関数の中にて console.log (もしくは alert) を記述し、関数が呼び出されているかどうかも確認してみてください。
意外と、関数は呼び出されているけど、評価式のミスなどもあり得ますので。。。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 23:24

    console.logでのデバッグ方法を知ることができました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Node.js

    2471questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • AngularJS

    613questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Express

    319questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • MongoDB

    281questions

    MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。