Question

我希望在init中绑定我的控制器的模型，调用init但是我没有看到任何数据有什么问题？

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

Answer 1

由于您使用jquery来获取数据，因此需要运行.$apply()，因为代码发生在角度知识之外

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

或者你根本不应该使用jquery而是注入$http（就像你对$scope所做的那样）并使用它：

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

Answer 2

另外更改以下内容：

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

Angular的问题没有看到我的数据

2 个答案: