angularjs中未定义的范围对象

时间:2014-06-30 20:25:06

标签: javascript html angularjs

我有一个html文件,我想从mongoDB上显示它的信息。 我想显示mongoDB中的所有消息。 我构建了一个期望信息的html页面:

<div class="jumbotron text-center">
    <h1>List</h1>
    <br><br>

    <button ng-click="showAllButton()">Show All</button>
    <br> <br>

    <p>{{ tagline }}</p>

    <label for="messageName">Message Name:</label>
    <input type="text" style="width:50%; float:center" ng-model="message.name"  name="message.name" readonly/>
    <br/><br/>

    <label for="text">Text:</label>
    <input type="text" style="width:50%" ng-model="message.text" name="message.text" readonly/>
    <br/><br/>

    <label for="images">Images:</label>
    <input type="text" style="width:50%" ng-model="message.images" name="message.images" readonly/>
    <br/><br/>

    <label for="template">Template:</label>
    <input type="text" style="width:50%" ng-model="message.template" name="message.template" readonly/>
    <br/><br/>

    <label for="millisecToShow">Millisec To Show:</label>
    <input type="text" style="width:50%" ng-model="message.millisecToShow" name="message.millisecToShow" readonly/>
    <br/><br/>

    <label for="timeFrame">Time Frame:</label><br>
    <label for="TimeStart">Start Time:</label>
    <input type="text" style="width:50%" ng-model="message.startDateTime" name="message.startDateTime" readonly/>
    <br/><br/>
    <label for="DateStart">End Time:</label>
    <input type="text" style="width:50%" ng-model="message.endDateTime" name="message.endDateTime" readonly/>
    <br/><br/>

    <label for="days">Days:</label><br>
    <input type="text" style="width:50%" ng-model="message.days" name="message.days" readonly/>
    <br/><br/>

    <label for="screenId">Screen ID:</label>
    <input type="text" style="width:50%" ng-model="message.screenId" name="message.screenId" readonly/>
    <br><br>

    <button ng-click="nextMsg()">Next</button>
    <button ng-click="previousMsg()">previous</button>
    <br><br>

</div>

我有那个控制器来做这件事:

angular.module('ListCtrl', []).controller('ListController', function($scope, superService) {

var index = 0;

    $scope.showAllButton = function() {
        superService.list().then(function (result) {

            if ((result != "false") && (result != undefined)) {
                index = 0;

                $scope.tagline = result;
                $scope.message.name = result[index].messageName;
                $scope.message.text = result[index].text;
                $scope.message.images = result[index].images;
                $scope.message.template = result[index].template;
                $scope.message.millisecToShow = result[index].millisecToShow;
                $scope.message.startDateTime = result[index].timeFrame[0].date.start + ". Time: " + result[0].timeFrame[0].time.start.hour + ":" + result[0].timeFrame[0].time.start.minutes;
                $scope.message.endDateTime = result[index].timeFrame[0].date.end + ". Time: " + result[0].timeFrame[0].time.end.hour + ":" + result[0].timeFrame[0].time.end.minutes;;
                $scope.message.days = result[index].timeFrame[0].days;
                $scope.message.screenId = result[index].screenId;
            }
            else {
                $scope.tagline = 'No messages';
            }
            return result.data;
        });
    };

我从数据库获得的信息很好。 但该信息没有显示在文本框中,错误是:&#34; TypeError:无法设置属性&#39; name&#39;未定义&#34;。 $ scope.message未定义。 有人可以告诉我为什么以及如何解决这个问题? 谢谢(:

1 个答案:

答案 0 :(得分:1)

$scope.message未定义,因此您必须定义它。 e.g:

$scope.message = {};
$scope.message.name = result[index].messageName;
...