ファクトリーサービスからのAngularJS関数が応答しない（適切な注入？）

Question

私はAngularJSを学んでいる学生です。なぜファクトリーサービスからの関数が私のビューで応答していないのか分かりません。私は関数を間違って呼び出していると思いますが、何度も何が起きているのか分からないほど多くの方法で呼び出してみました。また、コンソールにエラーがないので、何が起こっているのか分かりません。あなたの時間のために何か助けと感謝を感謝しなさい！

だから私は私の工場todoService.jsここ持っている：私がUI-ルータを使用していコントローラTodoCtrl.jsここ

(function() { 
    function TodoCtrl(TodoFact) { 
     this.todoFact = TodoFact; 
    } 
     angular 
      .module('markOff') 
      .controller('TodoCtrl', ['TodoFact', TodoCtrl]); 
})(); 

に注入されている

(function() { 
    function TodoFact($firebaseArray) { 
     var TodoFact = {}; 

     var todos = $firebaseArray(firebase.database().ref().child('/todo')); 

     TodoFact.addTodo = function(){ 
      todos.$add(todo); 
      todo.complete = false; 
     }; 

     TodoFact.removeTodo = function(todo) { 
      var index = $scope.todos.indexOf(todo); 
      $scope.todos.$remove(todo); 
     }; 

     TodoFact.complete = function(todo) { 
      todo.complete = true; 
      todos.$save(todo); 
     }; 

     var addFormShow = false; 

     TodoFact.toggleForm = function() { 
      addFormShow = addFormShow === false ? true : false; 
     }; 

     return TodoFact; 
    }; 

    angular 
     .module('markOff') 
     .factory('TodoFact', ['$firebaseArray', TodoFact]); 
})(); 

をルーティングに問題はありません。また、todoService.jsとコントローラ用のスクリプトも適切に追加しました。ここで

<script src="/scripts/app.js"></script>

<script src="/scripts/controllers/TodoCtrl.js"></script>

<script src="/scripts/services/todoService.js"></script>

私が解決しようとしているビューの一部です。基本的にクリックイベントの場合、要素は表示/非表示を切り替えます。

<div class="pull-right"> 
     <!-- Calling ToggleForm on click event, the element will show when addFormShow is false--> 
     <a class="btn btn-success" ng-click="todoFact.toggleForm()" ng-show="!todoFact.addFormShow"><span class="ion-loop"></span>Add</a> 

     <!-- Calling ToggleForm on click event, ng-show if addFormShow is true --> 
     <a class="btn btn-success" ng-click="todoFact.toggleForm()" ng-show="todoFact.addFormShow"><span class="ion-loop"></span>Cancel</a> 
</div> 

*編集*

これは、ルータが "controllerAs" 構文を使用しているので、私は、コントローラ

(function() { 
    function config($stateProvider, $locationProvider) { 
     $locationProvider 
      .html5Mode({ 
       enabled: true, 
       requireBase: false 
      }); 
     $stateProvider 
      .state('todo', { 
       url: '/todo', 
       controller: 'TodoCtrl as todo', 
       templateUrl: '/templates/todo.html' 
      }); 
    angular 
     .module('markOff', ['firebase', 'ui.router']) 
     .config(config); 
})(); 

Answer 1

とビューへのルーティングてる方法です：

$stateProvider 
     .state('todo', { 
      url: '/todo', 
      controller: 'TodoCtrl as todo', 
      templateUrl: '/templates/todo.html' 
     }); 

テンプレートの先頭にtodoが必要です変数：TodoFact工場でも

<div class="pull-right"> 
     <!-- Calling ToggleForm on click event, 
      the element will show when addFormShow is false--> 
     <a ng-click="todo.todoFact.toggleForm()" 
     ng-show="!todo.todoFact.addFormShow">Add</a> 

     <!-- Calling ToggleForm on click event, ng-show if addFormShow is true --> 
     <a ng-click="todo.todoFact.toggleForm()" 
     ng-show="todo.todoFact.addFormShow">Cancel</a> 
</div> 

、addFormShow変数はTodoFactオブジェクトのパブリックプロパティである必要があります。

//var addFormShow = false; 
    TodoFact.addFormShow = false; 

    TodoFact.toggleForm = function() { 
     //addFormShow = addFormShow === false ? true : false; 
     TodoFact.addFormShow = TodoFact.addFormShow === false ? true : false; 
    }; 

    return TodoFact;