Ellipse Ellipse - 21 days ago 5
AngularJS Question

I cannot assign my result of my api request to the view in AngularJS

This is only a portion of my code. For some reason I can assign vm.print to my response, it does not show. However, when I console.log() the response, it appears in the console. Please help. I can assign vm.print to any string outside of the app.model.predict(){} function but when I assign it inside the function, it does not show up in the view , but only shows up in the console.

<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>


This is only a portion of my code. It will not run in the console. I just need to someone to look at the syntax who is more familiar with angularjs and the clarifai api. thanks.

Answer

I'm not familiar with the library that you're using when you execute Clarifai.App, but I'm guessing it's not an Angular lib, so it probably just doesn't run the digest cycle automatically for you in the promise resolve (.then() callback)

You have to do it yourself. Try to inject thr $scope service, and run the $scope.$apply() method, like this:

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();
        });
})