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;