6

我有以下 AngularJS 应用程序，它由模板 ( index.html)、应用程序定义 ( app.js)、控制器定义 ( controllers.js) 和托管页面 ( host.jsp) 组成。

代码如下：

搜索.jsp

<div class="container-fluid" ng-app="facetedSearch">
    <div class="row-fluid" ng-view>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="/resources/js/page/search/app.js"></script>
<script src="/resources/js/page/search/controllers.js"></script>

应用程序.js

angular.module('MyApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
     when('/', {templateUrl:'/index.html', controller: MyController}).
     otherwise({redirectTo: '/'});
}]);

控制器.js

var MyController=['$scope','$http','$location',function ($scope, $http, $location) {
   //do some fancy stuff
   if($scope.myAttribute===undefined){
      $scope.myAttribute=someDataFromHttpRequest;
   }
   $location.search(someParameters);
}];

index.html 和 host.jsp 没有显示为简洁和无关紧要。

控制器从 Ajax 请求中获取一些数据，将其中的一些存储在其中$scope以避免再次请求，并将其显示给用户并等待输入。当用户在视图中选择一些数据时，我会更新 URL 查询部分以反映选择更改。但我想通过检查数据是否在$scope.

我面临的问题$scope.myAttribute是始终未定义。它会在每次请求时重置。我想我在滥用 AngularJS。有什么线索吗？

4

2 回答 2

13

当您离开控制器时，范围会被破坏。我会考虑制作一个存储你想要的东西的服务。

angular.module('MyApp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl:'/index.html', controller: MyController}).
        otherwise({redirectTo: '/'});
}])
.service("myService", function(){
    this.myAttribute = null;
});

var MyController=['$scope','$http','$location', 'myService',function ($scope, $http,         $location, myService) {
   //do some fancy stuff
   if(myService.myAttribute===null){
      myService.myAttribute=someDataFromHttpRequest;
   }
   $location.search(someParameters);
}];

服务用于在多个控制器/指令之间共享日期，所以我很确定这就是你想要的。

这是关于它们的文档信息：http: //docs.angularjs.org/guide/dev_guide.services.creating_services

于 2012-12-18T20:05:31.617 回答
4

您应该使用服务（或 $rootScope）来存储您想要保留的信息。服务是单例的，您可以将它们注入控制器中，您在那里设置的任何内容都将保留在您的应用程序中。

$scopes 在您更改路由时会被删除，因此它们不会持续存在。

这是一个例子：

var myApp = angular.module('myApp',[]);
myApp.factory('SomeService', function() {
  return {
      myAttribute : '12345'
  };
});

var MyController=['$scope','$http','$location', 'myService', 'SomeService',function ($scope, $http, $location, myService, SomeService) {
   //do some fancy stuff
   SomeService.myAttribute; //this is how you access myAttribute
}];

此外，我会在服务内部创建一个函数，以通过 AJAX 获取您想要的值（而不是将其放在控制器内部），因此服务将类似于：

myApp.factory('SomeService', function() {

    var SomeService = {};

    var myAttribute;

    SomeService.getMyAttribute = function () {

         if(!myAttribute) {

            //run ajax request then populate and return myAttribute

         }
         return myAttribute;
    };
    return SomeService;
});
于 2012-12-18T20:29:10.493 回答