ng-click不适用于列表组项目按钮

时间:2016-06-04 13:19:04

标签: html angularjs firebase angular-directive

我正在寻找解决方案,但无法解决问题。

我有HomeController,在其构造函数中我创建了一些函数来处理firebase项目。列表组显示todos和按钮,它们与数据状态相关联。下面的代码显示了todo 指令。我使用范围来交换数据。

              

ToDo App

                                                   添加任务                                         

  <!-- Task List Starts Here -->
  <ul class="list-group" ng-show="!isLogged">

    <li class="list-group-item clearfix message" ng-repeat="message in messages | filter: {mail : email}" ng-class="{disabled: ! message.done }">
      <p class="lead">{{message.text}}</p>
      <div>
        <span class="pull-right">
          <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil" 
            ng-click="editTask(message)"></span></button>

        <button class="btn btn-primary btn-xs" ng-show="! message.done"><span class="glyphicon glyphicon-ok" ng-click="doneTask(message)"></span></button>
        <button class="btn btn-primary btn-xs" ng-show="message.done"><span class="glyphicon glyphicon-repeat" ng-click="unDoneTask(message)"></span></button>
        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove" ng-click="deleteTask(message)"></span></button>
        </span>
      </div>
    </li>
  </ul>
  <!-- Task List Ends Here -->
</div>

然后我有main.controller文件

    export default class MainController {
constructor($scope, $firebaseArray, $firebaseAuth) {

    var ref = new Firebase("https://learn11.firebaseio.com/todos");
    $scope.messages = $firebaseArray(ref);

    $scope.addMessage = function() {
        $scope.messages.$add({
            text: $scope.newMessageText
        });
    };

    $scope.isLogged = false

    $scope.loginUser = function() {
        ref.authWithPassword({
            email: $scope.email,
            password: $scope.password
        }, function(error, authData) {
            if (error) {
                $scope.isLogged = false
                console.log("Login Failed!", error);
            }
            else {
                $scope.isLogged = true
                console.log($scope.isLogged)
            }
        });
    };

    $scope.addTask = function() {
        var message_ref = new Firebase('https://learn11.firebaseio.com/todos');
        var newMessageRef = message_ref.push();
        newMessageRef.set({
            'done': true,
            'text': $scope.task,
            'mail': $scope.email
        });

    };
    $scope.editTask = function(message) {
        $scope.task = $scope.messages[index].text;
        console.log($scope.messages[index].text);
        $scope.editIndex = index;
    }

    $scope.doneTask = function(message) {
        $scope.messages[index].done = true;

    }
    $scope.unDoneTask = function(message) {
        $scope.messages[index].done = false;
    }


    $scope.deleteTask = function(message) {
        console.log(message)
       $scope.messages.$remove(message)
    }

}
   }
你能帮帮我吗?我能做些什么才能让它发挥作用?而且你知道为什么 isLogged 状态在控制器中发生了变化时在视图中没有改变吗?

1 个答案:

答案 0 :(得分:0)

尝试使用$scope.$apply(function () {$scope.isLogged = true})更改isLogged