javascript - Angular 服务 : value lost when view changes

Question

我正在尝试构建一个从 Instagram 提取数据的简单 Angular 应用程序。用户在索引页面上输入一个主题标签，然后被呈现到另一个页面，其中显示带有该主题标签的帖子。

我尝试传递在服务中用作变量的主题标签，但是当 View 更改时，该值被覆盖。 (我可以在设置值并设置后立即检查该值，但一旦页面更改，我就会丢失该值)。

这是我的服务:

var instagramApp = angular.module('instagramApp')
.factory('feedData', function($rootScope) {
    var config = {};
    return {
        setHashtag: function (x) {
                config.hashtag = x;
        },
        getHashtag: function () {
            return config.hashtag;
        }
    }
});

还有我的两个 Controller :

设置主题标签(/index.html View ):

instagramApp.controller('indexController', ['$scope', 'feedData', '$window',
function($scope, feedData, $window){

$scope.generate = function(){
    feedData.setHashtag('marcheet');
    console.log(feedData.getHashtag());
    $window.location.href = '/results.html';
};

}]);

获取主题标签(/results.html View ):

instagramApp.controller('instagramController', ['$scope', 'Instagram', '$http', 'feedData',
function($scope, Instagram, $http, feedData){

    feedUrl = '/feed/?hashtag=' + feedData.getHashtag() +'&count=20';
    console.log(feedUrl);
    createStoryJS({
      type:       'timeline',
      width:      '800',
      height:     '600',
      source:     feedUrl,
      embed_id:   'my-timeline'
    });
}
]);

Answer 1

如@pcguru 所述，当您运行此行 $window.location.href = '/results.html'; 时，浏览器会重新加载您的 Angular 应用。

当用户单击页面上的链接或通过设置 $location.path('/someurl');(这是 getting/setting url information 的 Angular 服务)时，Angular 检测 url 的变化.您的 javascript 绕过了这一点。

注意 Angular docs on $location

What does it [$location] not do?

It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.

如果你想以编程方式更改 url，请使用 $location.path(url)，如果你希望用户单击链接并转到应用程序中的新位置而无需重新加载浏览器该页面然后您需要使用 angular-route.js ( https://code.angularjs.org/1.3.15/angular-route.js ) 设置路由，然后将 $routeProvider 注入(inject)到您应用的配置方法中

(function() {
    'use strict';

    var app = angular.module('instagramApp', ['ngRoute']);

    app.config(configFunc);

    function configFunc($routeProvider) {
         $routeProvider.when('/', {
             templateUrl: 'path/to/your/template.html',
             controller: 'HomeController'
         })
         .when('/results', {
             templateUrl: 'path/to/your/template.html',
             controller: 'ResultsController'
         });
    }
}());