我无法将我的 api 请求结果分配给 AngularJS 中的视图答案

【问题标题】：I cannot assign my result of my api request to the view in AngularJS我无法将我的 api 请求结果分配给 AngularJS 中的视图
【发布时间】：2016-11-18 00:11:49
【问题描述】：

这只是我的代码的一部分。出于某种原因，我可以将 vm.print 分配给我的回复，但它没有显示。但是，当我 console.log() 响应时，它会出现在控制台中。请帮忙。我可以将 vm.print 分配给 app.model.predict(){} 函数之外的任何字符串，但是当我在函数内部分配它时，它不会显示在视图中，而只会显示在控制台中。

 <main class="app container" ng-controller="webcamController as vm">
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <ng-webcam config="vm.config"
                       on-error="vm.onError(err)"
                       on-load="vm.onLoad()"
                       on-live="vm.onLive()"
                       on-capture-progress="vm.onCaptureProgress(src, progress)"
                       on-capture-complete="vm.onCaptureComplete(src)"></ng-webcam>
        </div>
        <div class="col-md-12">
            <p id="progress">Progress: {{vm.progress}}%</p>
        </div>
        <div class="col-md-12 buttons" ng-if="vm.showButtons">
            <button class="btn btn-primary" type="button" ng-disabled="!vm.captureButtonEnable" ng-click="vm.capture()">Capture</button>
            <button class="btn btn-primary" type="button" ng-click="vm.off()">Camera off</button>
            <button class="btn btn-primary" type="button" ng-click="vm.on()">Camera On</button>
        </div>
    </div>
    <div id="result" class="row"></div>
    <!-- Displays analysis -->
    <!--<div ng-repeat="x in analysis">
    <h3>Example heading <span class="label label-default">{{x.name}}</span></h3>
    </div>-->
    <div class="text-center">{{vm.print}}</div>

</main>


<script>
   vm.test(src);

   vm.test = function(src) {


    //converts to string
    var uri = src.toString();
    //String manipulation
    uri = uri.slice(23, uri.length);

    var app = new Clarifai.App(
      'kS3D7ofjZQYiyr_7uET1IemaxIzmnmK3vbX4Vhwt',
      'lvhKWZx9bMY1L0OMVmo9bMr9A9_PyCRgmP2FGvEJ'
    );

    //This message will show up
    vm.print = "Default message";

    // predict the contents of an image by passing in a url
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: uri}).then(
    function(response) {

    //str returns a string
    var str = response.request.response;
     //converting string to json
    var json = JSON.parse(str);
    //returns result
    console.log(json.outputs[0].data.concepts[0].name);
    //this does not show up in the view
    vm.print = json.outputs[0].data.concepts[0].name;
    },
      function(err) {
      console.error(err);
      vm.print = "Opps, something went wrong :(   " + err;
    }
    );

};


</script>

这只是我的代码的一部分。它不会在控制台中运行。我只需要找一个更熟悉 angularjs 和 clarifai api 的人来看看语法。谢谢。

【问题讨论】：

基于这个代码 sn-p，我想说问题是你的代码没有在控制器的范围内运行。

标签： javascript angularjs api httprequest clarifai

【解决方案1】：

我不熟悉您在执行 Clarifai.App 时使用的库，但我猜它不是 Angular 库，因此它可能只是不会在承诺解决（.then() 回调）

你必须自己做。尝试注入 $scope 服务，然后运行 $scope.$apply() 方法，如下所示：

app.controller('webcamController', function ($scope) {
    /* ... */
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: uri}).then(
        function(response) {
            /* ... */
            vm.print = json.outputs[0].data.concepts[0].name;
            $scope.$apply();
        });
})

【讨论】：