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

Question

最近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)"の部分が正しく動作していない状況です。

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

Answer 1

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

})();

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

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

ご参考になれば。

Comments

[mag-chang]

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

Answer 2

<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から利用するのをお勧めします。

Comments

[mag-chang]

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

Answer 3

})();

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

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

…… 等。

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

Comments

[mag-chang]

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