类型错误:无法读取未定义

时间:2017-04-02 01:10:44

标签: html angularjs firebase firebase-realtime-database

我正在使用Angularjs和firebase来创建一个作为任务计时器的应用程序。我创建了firebase对象,除非我尝试将task.newTask记录到控制台,否则一切正常。这是我的一些代码(请注意这不是所有代码):

//HTML
<aside id="sidebar">
    <section id="widget_1">
        <h2 class="titles">Task History:</h2>
        <input id="text-field" type="text" ng-model="taskText" />
        <input id="task-button" type="button" value="Add Task" ng-click="addTask()" />
    </section>

    <section id="widget_2">
        <h2 class="titles">Task List:</h2>            
        <table>
            <tr ng-repeat="task in timer_tasks | orderBy: '-taskText'">
                <td>{{ task.taskText }}</td>
            </tr>                
        </table>
    </section>
</aside>

//Controller:
(function() {
'use strict'

function HomeCtrl($scope, $firebaseArray, $interval) {
    console.log('I see you home controller ... you are loaded sir!!!')

    var timerRef = firebase.database().ref().child('timer_tasks');        
    $scope.timer_tasks = $firebaseArray(timerRef);


    $scope.addTask = function () {
        $scope.timer_tasks.$add({
            taskText: $scope.taskText,
            newTask: true
        }).then(function (timerRef) {
            $scope.taskText = '';
        });
    };


console.log(task.newTask);

在页面加载时,错误出现在console.log(task.newTask);

任何帮助都会很棒。提前谢谢!

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您需要在控制器中检索将构建$scope.timer_tasks的课本值,以后可以在ng-repeat中检索回来查看。

视图

<aside id="sidebar">
   <section id="widget_1">
     <h4 class="titles">Task History:</h4>
       <input id="text-field" type="text" ng-model="taskText" />
       <input id="task-button" 
        type="button" 
        value="Add Task" 
        ng-click="addTask(taskText)"/>
  </section>
</aside> 

脚本

myApp.controller('myCtrl', function($scope) {
    $scope.addTask = function (value) {
      console.log(" clicked : "+value);
    };
});

我所做的只是将addTask点击的值绑定到ng-model到ng-click,现在您可以看到addTask函数中有该值。