AngularJS功能從工廠服務沒有響應（正確注入？）

Question

我是學生學習AngularJS，我似乎無法弄清楚爲什麼工廠服務功能沒有響應在我看來。我認爲我錯誤地調用了函數，但我已經嘗試過調用了很多方法，我不知道發生了什麼。另外，控制檯中沒有錯誤，所以我不確定發生了什麼。感謝您的時間！

所以，我有我的廠todoService.js這裏：

(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]); 
})(); 

它被注入控制器TodoCtrl.js這裏

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

我使用的UI路由器路由沒有問題。我也爲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> 

*編輯*

這是如何我的路由與控制器

(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

由於路由器使用 「controllerAs」 語法的觀點：

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

該模板需要預先配置todo變量：

<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> 

另外在TodoFact工廠，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;