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

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

<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的语法。谢谢。

来源

2016-11-18 Ellipse

在此基础上的代码片段，我想说的问题是，你的代码是不是在控制的范围内运行。 – sheppe

我并不熟悉你在执行Clarifai.App时使用的库，但我猜这不是一个Angular库，所以它可能不会自动在你的承诺中运行摘要循环解决（.then()回调）

你必须自己动手。尝试注入THR $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(); 
     }); 
})

来源

2016-11-18 00:30:09

谢谢，它的工作原理。 – Ellipse

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

回答

相关问题