Issue with Angular don't see my data

Question

I want that in the init to bind the model of my controller the init is called but I don't see any data what is wrong ?

Index.html
 <!DOCTYPE html>
 <html ng-app="I-Sign">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name="viewport" content="width=device-width" />
<title>Sign Language Application</title>

<link rel="stylesheet" href="scripts/jquery.mobile-1.4.5.css" />

<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<script src="mainController.js"></script>
 </head>

 <body>
 <div ng-controller="MainCtrl as ctrl" ng-init="init()">

    <div id="categories">
           <ul data-role="listview" data-inset="true">
              <li ng-repeat="category in ctrl.data.categories"><a ng-     click="ctrl.showWords(category)" href="#">
                     <img src="images/Can_I.png">
                     <h1>{{category.name}}</h1>
            </a>   
            </li>
</ul>
</div>
<div id="words">
        <ul data-role="listview" data-inset="true">
                
            <li ng-repeat="word in ctrl.currentWords"><a ng-click="ctrl.showMovie()" href="#">
                     <img src="images/Can_I.png">
                     <h1>{{word.name}}</h1>
            </a>                        
            </li>
</ul>
    <div>
        <input  id="upBtn" class="ui-block-a" type="button" value="UP" ng-hide ng-click="ctrl.showCategories()">
    </div>
</div>

mainController.js

 var myApp = angular.module('I-Sign',[]);

 myApp.controller('MainCtrl', ['$scope', function($scope) {
    var self = $scope;

    $scope.init = function () {
         var that = this;
         that.getData();
         self.currentWords = [];
    }

    $scope.$watchCollection(function () {
       //var that = this;
       return self.data;
    }, function () {
        console.log("Changed");
    });

    $scope.getData = function () {
        var that = this;
         $.getJSON('data/database.json', function (data) {
            that.data = data;
        });
    }

    $scope.showCategories = function () {
         var that = this;

        $("#words").addClass("ng-hide");
        $("#categories").removeClass("ng-hide");
        $("#upBtn").assClass("ng-hide");

    }

    $scope.showWords = function (category) {
         var that = this;

        that.currentWords = [];
        $("#categories").addClass("ng-hide");
        $("#words").removeClass("ng-hide");
        $("#upBtn").removeClass("ng-hide");
        that.data.words.forEach(function (word) {
            if (word.categoryId === category.id) {
                that.currentWords.push(word);
            }
        });
    }
 }]);

looks like getData is asynchronous, try using q.defer to have the data ready when you want it. — Daniele Sassoli, Oct 19 '15 at 14:34
`ng-init="init()"`. This is not why ng-init is intended for https://docs.angularjs.org/api/ng/directive/ngInit — Deblaton Jean-Philippe, Oct 19 '15 at 14:38
I feel like you're doing a hybrid version of trying to assign to $scope but also trying to leverage the benefits of a *controller as* implementations. The very fact that you're doing `var that = this` means that you're trying to blend the two usage paradigms. Chose one or the other, but not both. I'd advocate the *controller as* usage because then you can build controller classes and use *this* to your heart's content. — jusopi, Oct 19 '15 at 14:38
`var self = $scope` is wrong if you want to use the controllerAs syntax. You should do `var self = this;`. And then, add properties to `self` instead of `$scope` — Deblaton Jean-Philippe, Oct 19 '15 at 14:39
Mixing jquery and angular the way you do it is wrong. Please use `$http.get()` instead of `$.getJson()` — Deblaton Jean-Philippe, Oct 19 '15 at 14:41
Before going further, I really recommend you to read : http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background and https://github.com/johnpapa/angular-styleguide — Deblaton Jean-Philippe, Oct 19 '15 at 14:42
And instead of doing `.addClass("ng-hide");` and `removeClass("ng-hide");` check the angularjs usage of `ng-show` and `ng-hide`. — Diana R, Oct 19 '15 at 14:48

score 0 · Accepted Answer · answered Oct 19 '15 at 14:37

Since you used jquery to get your data, you need to run a .$apply() as the code happened outside of angulars knowledge

    $.getJSON('data/database.json', function (data) {
        that.data = data;
        $scope.$apply();
    });

Alternatively you should not be using jquery at all and instead inject $http in (like you did with $scope) and use that:

    $http.get('data/database.json')
        .success(function(data){
            that.data = data;
        });

score 0 · Answer 2 · answered Oct 19 '15 at 14:56

Additionally change the following:

$scope.showCategories = function () {
     $scope.showCategories = true;
}

$scope.showWords = function (category) {
    that.currentWords = [];
     $scope.showCategories = false;
    that.data.words.forEach(function (word) {
        if (word.categoryId === category.id) {
            that.currentWords.push(word);
        }
    });
}

and your html to:

 <div id="categories"  ng-show="showCategories">
       <ul data-role="listview" data-inset="true">
          <li ng-repeat="category in ctrl.data.categories">
                <a ng-click="ctrl.showWords(category)" href="#">
                 <img src="images/Can_I.png">
                 <h1>{{category.name}}</h1>
                </a>   
              </li>
          </ul>
 </div>
 <div id="words" ng-show="!showCategories">
            <ul data-role="listview" data-inset="true">                
                <li ng-repeat="word in ctrl.currentWords">
                   <a ng-click="ctrl.showMovie()" href="#">
                       <img src="images/Can_I.png">
                       <h1>{{word.name}}</h1>
                   </a>                        
                </li>
            </ul>
  </div>
  <div>
          <input  id="upBtn" class="ui-block-a" type="button" value="UP" ng-show="!showCategories" ng-click="ctrl.showCategories()">
  </div>

Issue with Angular don't see my data

2 Answers2