javascript - 工厂服务中的 AngularJS 函数没有响应(正确注入(inject)？)

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

它正在被注入(inject)到 Controller TodoCtrl.js 中

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

我正在使用 ui-router 并且路由没有问题。我还适本地添加了 todoService.js 和 Controller 的脚本。

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

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

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

这是我试图解决的 View 的一部分。基本上，在单击事件时，元素将切换显示/隐藏。

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

* 编辑 *

这就是我使用 Controller 路由到 View 的方式

(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 对象的公共(public)属性。

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

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

    return TodoFact;