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-router并且路由没有问题。我还适当地为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;

工厂服务中的AngularJS功能无响应（正确注入？）

1 个答案: