2

私はまあまあの JS スキルを使って AngularJS で「いい」ことをしようとしています。

angular.module('App').factory("SQLService", function ($q) {

    var db = window.openDatabase("FOOD_DATABASE", app.current_version, "FOOD_DATABASE_DN", 5 * 1024 * 1024);

    // public methods
    function getCategories(){
      deferred = $q.defer();

      db.transaction(queryDB, errorCB);

      function queryDB(tx) {
        tx.executeSql('SELECT * FROM CATEGORIES', [], querySelectSuccess, errorCB);
      }

      return deferred.promise;
    }

    function getDishes(){
      deferred = $q.defer();

      db.transaction(queryDB, errorCB);

      function queryDB(tx) {
        tx.executeSql('SELECT * FROM DISHES', [], querySelectSuccess, errorCB);
      }

      return deferred.promise;
    }

    // something like private methods
    function errorCB(err) {
      alert("Error processing SQL: " + err.code);
    }

    function querySelectSuccess(tx, results) {
      var len = results.rows.length;
      var output_results = [];

      for (var i=0; i<len; i++){
        output_results.push(results.rows.item(i));
      }

      deferred.resolve(output_results);

    }

  //expose object with public methods
  return {
    getCategories: getCategories,
    getDishes: getDishes,

  };

});

私が気に入らない最初のことは、各パブリック関数でグローバルdeferred = $q.defer();を作成することです。それをローカルとして宣言すると、そのdefferedオブジェクトを追加のパラメーターとしてquerySelectSuccessコールバックに渡す方法がわかりません。または、何らかの方法ですべてをリファクタリングする必要がありますか? あなたの意見は何ですか？

4

2 に答える 2

0

おそらく私は間違っていますが、角度のある最初の経験から、見逃したので見逃したものがあると思います

ビュー（UI）海峡をサービス/ファクトリに接続すると、defferedやすべての種類の更新は必要ありませんが、自動的に更新され、このように行われます

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .main { width: 400px; }
        .singleItem { width: 25%; display:inline-block; border: 2px dashed green; }
        .textContainer { text-align: center; }
    </style>
    <script src="angular.js"></script>
    <script >
        var myStudyModule = angular.module('myStudyModule', []);

        myStudyModule.service('myService', function ($http) {
            console.log("myService");
            var self = this;
            self.catalog = [];

            self.getData = function (parentKey, level) {
                console.log("myService.getMyData");
                var url = 'Handler1.ashx';
                if (parentKey && level)
                    url += '?parentKey=' + parentKey + '&level=' + level;
                $http.get(url).success(function (data) {
                    console.log("$http.get.success");
                    self.catalog = data;
                });
            };

            self.getData();
        });

        var myController = function ($scope, myService) {
            console.log("myController");
            $scope.myService = myService;

            $scope.MainItemClick = function (catalogItem) {
                console.log("$scope.MainItemClick");
                myService.getData(catalogItem.key, catalogItem.level + 1);
            };
        };

        myStudyModule.controller(myController);
    </script>
</head>
<body>
    <div class="main" ng-app="myStudyModule" ng-controller="myController"> 
        <div class="singleItem" ng-repeat="catalogItem in myService.catalog" ng-click="MainItemClick(catalogItem)" >
            <a class="box" href="#" >
                <img ng-src="{{ catalogItem.image }}" width="100">
                <div class="textContainer" >
                    <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

ところで、ここにはもっと多くの自己学習の例があり ます https://skydrive.live.com/redir?resid=949DC4EDBFFD4738!227&authkey=!AO_dsCMOFqndeLU

于 2013-10-17T08:18:34.897 に答える