angularjs - AngularJS插值错误

Question

我正在将房间的属性显示为我正在处理的房间管理应用程序的一部分，这是输出:

如您所见，Beamer(投影机为英语)的值为“Sony(lamp 01/12/2013)”。此输出是正确的，但是当我打开控制台时，我看到一些有关插值的错误:

更大的分辨率:

"Can't interpolate: {{getBeamerString()}} TypeError: Cannot read property 'aanwezig' of undefined"

这是我的html部分:

<section class="eigenschappen">
    <table class="table table-striped table-hover table-bordered">
        <thead>
        <tr>
            <th>Eigenschap</th>
            <th>Waarde</th>
            <th>Bewerk</th>
        </tr>
        </thead>
        <tbody>

        ...

        <tr>
            <td><img class="ruimteNaam" src="../Images/Beamer.png" alt=""/>Beamer</td>
            <td>{{getBeamerString()}}</td>
            <td><img class="edit" src="../Images/Edit.png" alt=""/></td>
        </tr>

        ...

        </tbody>
    </table>
</section>

currentRuimte(英语中的CurrentRoom)是一个范围定义的变量，它使用资源服务从我的mongoDB中获取数据来获取其值:

function RuimteController($scope, $routeParams, Ruimte) {

    $scope.currentRuimte = Ruimte.get({
        ruimteNaam: $routeParams.ruimteNaam
    });

    $scope.getBeamerString = function () {
        var beamer = $scope.currentRuimte.beamer;
        if(beamer.aanwezig == 'Ja'){
            return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
        }else{
            return '-';
        }
    }
}

当我使用batarang检查示波器时，得到以下信息:

为什么我得到错误，为什么我仍然得到正确的输出？
有没有办法防止错误发生？请尽我所能，
我一般对AngularJS和Javascript还是陌生的，并试图扩展我的技能。

Answer 1

问题是

$scope.currentRuimte = Ruimte.get({
    ruimteNaam: $routeParams.ruimteNaam
});

是异步操作。当此调用返回时， $scope.currentRuimte将成为空白对象，并且稍后，当数据可用时，它将用HTTP响应填充。

这意味着您的 View 第一次被渲染时， $scope.currentRuimte将为 {}，因此 $scope.currentRuimte.beamer将为 undefined，因此此行:

var beamer = $scope.currentRuimte.beamer;
if(beamer.aanwezig == 'Ja'){ /* <-- undefined.aanwezig ! */
}

将引发一个异常(exception)。您可以通过确保 beamer首先是真实的来解决此问题:

$scope.getBeamerString = function () {
    var beamer = $scope.currentRuimte.beamer;
    if(beamer && beamer.aanwezig == 'Ja'){
        return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
    }else{
        return '-';
    }
}