我無法將我的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中的視圖

回答

相關問題