Question

我开始使用AngularJS框架，事实是我在不同的视图中需要相同的范围，并且据我所知，控制器中的所有范围都在每个视图中重新初始化。

我阅读了一些手册，并通过使用＆＃34;工厂＆＃34;找到了解决方案，这些允许您在不同视图中保留持久数据。但是，我可能以不正确的方式使用工厂，因为在控制器功能之后，我需要一个新的视图，那里的值没有改变......

我的app.js文件：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
var valid_numbers = ["2222","7777","8888","9999"];

qrApp = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

 .factory("Scannresult", function(){

   var interfaz= {
     data: "Not information"
   };
   return interfaz;
 })

  .controller("qrController", function($scope, $cordovaBarcodeScanner, Scannresult) {
    document.addEventListener("deviceready", function () {
    $scope.result=Scannresult.data;
    $scope.scanBarcode = function() {
        $cordovaBarcodeScanner.scan().then(successCallback, errorCallback);
        }});

    errorCallback = function (error) {
    alert("An error happened -> " + error);
    };
    successCallback= function(imageData){
              $scope.result=Scannresult.data;

        var index = valid_numbers.indexOf(imageData.text);    //chequea si el numero encontrado es valido
      if (index >= 0) {
        alert("El código " + imageData.text + " es valido! :D");
        alert("Factory = " + Scannresult.data);
        Scannresult.data = imageData.text;
        $scope.result=Scannresult.data;

        alert("1 El Scope es " + Scannresult.data);
        alert("2 El Scope es " + $scope.result);
        $scope.$apply();
                alert("2.1 El Scope es " + $scope.result);

        if (imageData.cancelled) alert("Volve a internarlo!");
        else
          window.location = "Scannresult.html";
      } else {
        alert("El código encontrado no es valido: " + imageData.text);
      }
    }
});

在此代码中，我需要的是扫描后，$scope.result的值显示在Scannresult.html中，但在此文件中，范围具有初始值。

Scannresult.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Resultado</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

  <body ng-app="starter">
  <div ng-controller="qrController">
    <div class="list card">
    <div class="item item-avatar">
    <h2>Información del código</h2>
    <h2>   escaneado</h2>
    <p>Aula: {{ result }}</p>
  </div>

  <div class="item item-image">
    <img src="img/aula.png">
  </div>

  <a class="item item-icon-left assertive" ng-click="scanBarcode()" href="#">
    <i class="icon ion-music-note"></i>
Volver a escanear  </a>

</div>  </div>
</body>
</html>

Answer 1

您可以使用工厂，然后依赖项将它们注入您的控制器，这样您就可以解析可以在多个控制器上使用的共享实例。

如果您正在寻找一种跨多个范围或页面访问数据或变量的简单方法，您可以谨慎使用$rootScope。

例如，$rootScope.test = true的分配将解析您尝试解决此问题的任何控制器上的true {/ 1}}。

但请谨慎使用，因为您不希望像现在一样污染或弄乱您的$ rootScope，如任何控制器所述。

Angular：范围/工厂值的问题

1 个答案: