How to make sure that $scope.property has value before it is used

Question

I have an Angular controller with two $scope properties:

 $scope.details = ortabilityService.detail();

 $scope.treeViewOptions = {           
            dataSource: new kendo.data.HierarchicalDataSource({
                data: $scope.details               
        };

As we can see, tree view options depend on details to be resolved before it uses it as data source. Now, the problem is that it is an Async call and it is always not guarantee that it is resolved before it is used inside treeviewOptions. Because of this it is a very unreliable load and it loads sometimes and does not load some times. How can I make sure that $scope.details has value before it is used inside treeViewOptions?

score 2 · Answer 1 · answered Nov 18 '16 at 21:58

The goal is not to make sure it has a value before you use it, but instead to make sure that when it get's its value, the page updates.

You can do that using a watch, or a promise.

$scope.details = ortabilityService.detail();

$scope.$watch('details', function(newValue, oldValue) {
  $scope.treeViewOptions = {           
        dataSource: new kendo.data.HierarchicalDataSource({
            data: newValue               
    };
});

Josh Beam · Accepted Answer · 2016-11-18T22:43:58.390

2

If detail() returns a promise, you can do this:

ortabilityService.detail().then(function(result) {
  $scope.details = result;

  $scope.treeViewOptions = {           
    dataSource: new kendo.data.HierarchicalDataSource({
      data: $scope.details               
    })
  };
});

Edit

As pointed out the comments, ortabilityService.detail().$promise.then works in this case.

edited Nov 18 '16 at 22:43

answered Nov 18 '16 at 22:01

Josh Beam

19,292
3
45
68

it is throwing me an error saying that ortabilityService.detail().then i snot a function – Lost Nov 18 '16 at 22:14
1

to give more details I had to make a minor change and do ortabilityService.detail().$promise.then and it worked. You can change your answer accordingly – Lost Nov 18 '16 at 22:29

score 0 · Answer 3 · edited May 23 '17 at 10:30

I have found that angular kendo works really well with promises: AngularJS : Where to use promises? Some psuedo code might be:

$scope.ctrl.details.$promise.then(function (results) {

   $scope.treeViewOptions = {           
            dataSource: new kendo.data.HierarchicalDataSource({
                data: results               
        };   
}

Or you can load kendo data such as

var kendo_data_source = new kendo.data.DataSource();

...
//after the promise is complete or data loads
kendo_data_source.data(results)

score 0 · Answer 4 · answered Nov 19 '16 at 00:05

Considering ortabilityService.detail() returns a promise

ortabilityService.detail().then(
    function success(result){
        $scope.treeViewOptions = {           
            dataSource: new kendo.data.HierarchicalDataSource({
                data: result              
            });
    }, 
    function error(result){
        //when it fails to load
    }
);

How to make sure that $scope.property has value before it is used

4 Answers4