Angular的問題沒有看到我的數據

我希望在init中綁定我的控制器的模型init被調用，但我沒有看到任何數據有什麼問題？Angular的問題沒有看到我的數據

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

來源

2015-10-19 user1365697

樣子getData是異步的，請嘗試使用q.defer在需要時準備好數據。 –

我嘗試過使用靜態數據，但它不起作用 – user1365697

'ng-init =「init（）」'。這不是爲什麼ng-init打算用於https://docs.angularjs.org/api/ng/directive/ngInit –

既然你使用jQuery來獲取你的數據，你需要運行一個.$apply()作爲代碼發生angulars知識之外

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

另外，你不應該使用jquery a ■所有，而是注入在$http（像你$scope沒有），並使用：

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

來源

2015-10-19 14:37:44

此外更改如下：

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

和你的HTML：

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

來源

2015-10-19 14:56:50

Angular的問題沒有看到我的數據

回答

相關問題