如何在离子1 /角1中预先缓存网址内容?

时间:2017-06-19 19:42:33

标签: javascript angularjs ionic-framework angular-cache

我非常擅长离子和工作在你加载一堆类别的应用程序,然后是类别中的项目列表,当你点击类别中的项目时,文档将加载包含基本上的内容一个图像。目前,一切都很好,但我想在我的类别可见时预加载内容,所以即使我离线我也应该能够点击类别列表中的任何项目并加载相应的文档。我在网上查了一下,但是除了本地存储之外我找不到任何东西,它们在您访问之后而不是之前缓存数据。有没有办法预加载或预先缓存内容?

这是我的控制器代码:

 angular.module('starter.controllers', ["utility.services"])
  .directive("bindCompiledHtml", ["$compile", "zoomPerOrientation", function($compile, zoomPerOrientation) {
    return {
      template: '<div></div>',
      scope: {
        rawHtml: '=bindCompiledHtml'
      },
      link: function(scope, elem, attrs) {
        scope.$watch('rawHtml', function(value) {
          if (!value) return;
          var newElem = $compile(value)(scope.$parent);
          elem.contents().remove();
          zoomPerOrientation.zoomTo('docScroll');
          elem.append(newElem);
          elem.bind("click", function(e) {
            e.stopPropagation();
            e.preventDefault();
            if (e.target.tagName === 'A') {
              window.open(encodeURI(e.target.href), '_system', "presentationstyle=fullscreen,closebuttoncaption=close,location=no,transitionstyle=fliphorizontal");
              return false;
            } else if (e.target.parentNode.tagName === 'A') {
              window.open(encodeURI(e.target.parentNode.href), '_system', "presentationstyle=fullscreen,closebuttoncaption=close,location=no,transitionstyle=fliphorizontal");
              return false;
            }
          });
        });
      }
    };
  }])
  .directive('setHeight', function($window) {
    return {
      link: function(scope, element, attrs) {
        element.css('height', $window.innerHeight + 30);
      }
    }
  })
  .controller("MenuCtrl", ["$scope", "MenuService", "$stateParams", "$state", "ConfigUrls", function($scope, MenuService, $stateParams, $state, ConfigUrls) {
    //  debugger;
    console.log("MenuCtrl");

    $scope.menuData = [];
    $scope.noMenuDataMsg = "Loading....";
    $scope.LoadMenu = function(forceLoad) {
      console.log("MenuCtrl - LoadMenu");

      //  console.log(MenuService.getClinicalAreas(forceLoad));
      MenuService.getClinicalAreas(forceLoad).then(function(data) {
        $scope.menuData = data;
      }, function(err) {
        console.log(err);
        if (err.error === "timeout") {
          $scope.noMenuDataMsg = "Error: Unable to retrieve data due to network error! Please try again when you are in network."
        } else {
          $scope.noMenuDataMsg = "Error retrieving data! Please contact system administrator."
        }
        $scope.menuData = [];
      }).finally(function() {
        $scope.$broadcast('scroll.refreshComplete');
      });
    }
    $scope.deviceModel = window.localStorage.getItem("deviceModel");
    // console.log(MenuService);
    // console.log($scope.menuData);
    $scope.title = $stateParams.topTitle;
    var metaTag = $stateParams.metaTag;
    //console.log(ConfigUrls[metaTag+"Published"]);
    if (metaTag !== "") {
      window.localStorage.setItem('publishedUrl', ConfigUrls[metaTag + "Published"]);
      window.localStorage.setItem('docUrl', ConfigUrls[metaTag + "DocUrl"]);
      window.localStorage.setItem('cacheKeyPrefix', metaTag);

      $scope.LoadMenu(false);
    } else {
      $scope.noMenuDataMsg = "Under Construction!";
    }

    //console.log("metaTag",metaTag);
    //if ($stateParams.topTitle === "Transplant") {
    //    $scope.LoadMenu(false);
    //}
    //else {
    //    $scope.noMenuDataMsg = "Under Construction!";
    //}
    $scope.showHomeItem = function(clinicalArea) {
      console.log("MenuCtrl - showHomeItem");

      $state.go('contr.home', {
        cA: clinicalArea
      });
    }
    $scope.goHome = function() {
      console.log("MenuCtrl - goHome");

      $state.go('contr.topmenu');
    }
  }])
  .controller("HomeCtrl", ["$scope", "HomeService", "$stateParams", "$state", function($scope, HomeService, $stateParams, $state) {


    console.log("HomeCtrl");

    $scope.organs = [];
    $scope.title = $stateParams.cA;
    $scope.LoadHome = function(forceLoad) {
      console.log("HomeCtrl - LoadHome");

      HomeService.getOrgans($stateParams.cA, forceLoad).then(function(data) {
        $scope.organs = data;
      }, function(err) {
        $scope.organs = [];
      }).finally(function() {
        $scope.$broadcast('scroll.refreshComplete');
      });
    }
    $scope.showLevel2Item = function(title, clinicalArea) {
      console.log("HomeCtrl - showLevel2Item");

      $state.go('contr.level2', {
        title: title,
        cA: clinicalArea
      });
      //:title/:cA
    }

    $scope.goHome = function() {
      console.log("HomeCtrl - goHome");

      $state.go('contr.topmenu');
    }

    $scope.LoadHome(false);

  }])
  .controller('Level2Ctrl', ["$scope", "OrganService", "$stateParams", "$state", function($scope, OrganService, $stateParams, $state) {
    $scope.title = "Level2 ";

    console.log("Level2Ctrl");

    $scope.parentOrgan = {};
    $scope.viewTitle = $stateParams.title;

    OrganService.getSingleOrganDetail($stateParams.cA, $stateParams.title).then(function(data) {
      $scope.parentOrgan = data[0];
      $scope.parentOrgan.clinicalAreaDisp = "Transplant";
    }, function(err) {
      $scope.parentOrgan = {};
    });

    console.log($scope.parentOrgan);

    $scope.subGroup = [];

    $scope.LoadSubGroups = function(forceLoad) {
      console.log("Level2Ctrl - LoadSubGroups");
      OrganService.getSubGroups($stateParams.title, $stateParams.cA, forceLoad).then(function(data) {
        $scope.subGroup = data;
        console.log("$scope.subGroup", $scope.subGroup);
      }, function(err) {
        $scope.subGroup = [];
      }).finally(function() {
        $scope.$broadcast('scroll.refreshComplete');
      });
    }


    //$scope.deviceModel = window.localStorage.getItem("deviceModel");
    //$scope.devicePlatform = window.localStorage.getItem("devicePlatform");

    $scope.toggleGroup = function(group) {
      group.show = !group.show;
    };
    $scope.isGroupShown = function(group) {
      return group.show;
    };
    $scope.showDocumentDtl = function(id, docTitle, sgName, mnGroup, area) {
      console.log("Level2Ctrl - showDocumentDtl");

      $state.go('contr.doc-dtl', {
        id: id,
        docTitle: docTitle,
        sgName: sgName,
        mnGroup: mnGroup,
        area: area
      });
      //:title/:cA
    }
    $scope.goHome = function() {
      console.log("Level2Ctrl - goHome");
      $state.go('contr.topmenu');
    }
    $scope.LoadSubGroups();
  }])
  .controller('DocumentCtrl', ["$scope", "DocmentService", "zoomPerOrientation", "$stateParams", "$ionicScrollDelegate", "$state", function($scope, DocmentService, zoomPerOrientation, $stateParams, $ionicScrollDelegate, $state) {
    $scope.viewData = {};
    $scope.snippet = "<p style='margin-top:40%;margin-left:40%;font-weight:bold;font-size:1.6em;' class='item item-stable'>Loading...</p>";
    $scope.statusMessage = "";
    $scope.title = $stateParams.mnGroup;

    console.log("DocumentCtrl");

    console.log("$stateParams", $stateParams);
    //, $stateParams.docTitle, $stateParams.sgName, $stateParams.mnGroup, $stateParams.area
    // console.log("Inside docuemtn controller");
    $scope.LoadDocument = function(forceLoad) {
      console.log("DocumentCtrl - LoadDocument");
      DocmentService.getRowDocument($stateParams.id, $stateParams.docTitle, $stateParams.sgName, $stateParams.mnGroup, $stateParams.area, forceLoad).then(
        function(data) {
          // console.log("successfull", data);
          $scope.viewData = data;
          $scope.snippet = $scope.viewData.document;
        },
        function(reason) {
          //  console.log("Error Occured", reason);
          $scope.viewData = {
            "docTitle": "Error Occured!"
          };
          if (reason.error === "timeout") {
            $scope.snippet = "<div style='margin-top:40%;margin-left:15%;font-weight:bold;font-size:1.6em;width:600px !important;padding:16px !important;line-height:120%;' class='item item-stable item-text-wrap item-complex'>Error: Unable to the load the document at this time. Please make sure you are in the network or you have already fetched the document while you were in the network!</div>";
          }
          //  $scope.statusMessage = err;
        }).finally(function() {
        console.log("finally", data);
        $scope.$broadcast('scroll.refreshComplete');
      });
    }

    //below code would be refactored in near future.
    //It is not a good practice adding window event listener in the controller
    window.addEventListener('orientationchange', function() {
      try {
        if ($ionicScrollDelegate.$getByHandle('docScroll')._instances.length > 2) {
          zoomPerOrientation.zoomTo('docScroll');
        }
      } catch (exception) {
        console.log(exception);
      }

    });
    $scope.goHome = function() {
      console.log("DocumentCtrl - goHome");
      $state.go('contr.topmenu');
    }

    $scope.LoadDocument(true);
  }])
  .controller('TopMenuCtrl', ["$scope", "TopMenuService", "$state", "$ionicHistory",
    function($scope, TopMenuService, $state, $ionicHistory) {
      $ionicHistory.clearHistory();
      $scope.title = "Rules";
      $scope.menuItems = [];
      $scope.menuItemsLandscape = [];
      $scope.flatMenuItems = [];
      $scope.tileView = true;
      $scope.listView = false;
      $scope.portraitMode = true;

      console.log("TopMenuCtrl");

      TopMenuService.getMenuItems().then(function(data) {
          $scope.menuItems = data.colData;
          $scope.flatMenuItems = data.flatData;
          $scope.menuItemsLandscape = data.threeColData;
          console.log($scope.menuItems);
        },
        function() {
          $scope.menuItems = [];
        });

      $scope.showMenuItem = function(title, metaTag) {
        console.log("TopMenuCtrl - showMenuItem");

        //$state.go('tab.menu', { topTitle: title });
        $state.go('contr.menu', {
          topTitle: title,
          metaTag: metaTag
        });
      }

      $scope.itemChanged = function() {
        console.log("TopMenuCtrl - itemChanged");

        console.log($scope.tileView);
        if ($scope.tileView) {
          $scope.listView = true;
          $scope.tileView = false;

        } else {
          $scope.listView = false;
          $scope.tileView = true;
        }
      }
      //  console.log(window.orientation);
      function onChangeOrientation() {
        console.log("TopMenuCtrl - onChangeOrientation");

        try {
          //landscape mode
          // console.log("Orientation Changed");

          if (window.orientation === 90 || window.orientation == -90) {
            $scope.portraitMode = false;
          }
          //portrait
          else {
            $scope.portraitMode = true;
          }
        } catch (exception) {
          console.log(exception);
        }
      }

      onChangeOrientation();
      window.addEventListener('orientationchange', function() {
        try {
          //landscape mode
          // console.log("Orientation Changed");

          if (window.orientation === 90 || window.orientation == -90) {
            $scope.$apply(function() {
              $scope.portraitMode = false;
            });
          }
          //portrait
          else {
            $scope.$apply(function() {
              $scope.portraitMode = true;
            });
          }
        } catch (exception) {
          console.log(exception);
        }

      });

    }
  ])
  .controller('LoginController', ["$scope", "$location", "$ionicHistory", '$timeout', '$ionicLoading', '$state',
    function($scope, $location, $ionicHistory, $timeout, $ionicLoading, $state) {

      $scope.username = "Guest";
      $scope.password = "Abcd123";
      // $ionicNavBarDelegate.showBar(false);
      $scope.login = function(password) {
        console.log("LoginController - login");

        if (password) {
          $ionicLoading.show({
            content: 'Loading',
            animation: 'fade-in',
            showBackdrop: true,
            template: '<p class="item-icon-left bar-header"><ion-spinner icon="lines"/></p>',
            maxWidth: 200,
            showDelay: 0
          });
          window.localStorage.setItem("Pswd", password);
          $ionicHistory.nextViewOptions({
            disableAnimate: true,
            disableBack: true
          });

          $timeout(function() {
            $ionicLoading.hide();
            //$location.path("/tab/topmenu");
            $state.go('contr.topmenu');
          }, 1000);
        }
      }
    }
  ])
  .controller('AccountCtrl', function($scope) {
    $scope.settings = {
      enableFriends: true
    };
  });

如果您需要任何其他信息,请告诉我。此外,目前我支持本地缓存在本地缓存类别,但不预先缓存。有没有办法事先检索这些文件?点击特定项目后,请查看我的装入文档部分,其中涉及加载文档URL。

1 个答案:

答案 0 :(得分:0)

请参考我已经用编程方法解释了所有内容。

StackOverflow Solution Link

您可以使用此解释方法,并为正在寻找此问题答案的其他人添加。