Javascript 角度服务：视图更改时丢失的值

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

我曾尝试传递在服务中用作变量的hashtag，但当视图更改时，该值将被覆盖。（我可以在设置和设置后立即检查该值，但一旦页面更改，我就会丢失该值）

这是我的服务：

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

还有我的两个控制器：

设置hashtag（在/index.html视图中）：

获取hashtag（在/results.html视图中）：

---

您需要使用Angular的路由器来处理位置更改。这样，当您转到详细信息视图时，就不会从头重新加载整个应用程序

---

.

正如@pcguru所说，您需要使用或保留单个页面的上下文

AngularRouter是Angular框架的一部分，使用简单。 Ui路由器是一个补充，它更具成本模拟性，允许您同时使用多个视图。如果从角度开始，可能不需要增加额外的复杂性

---

使用类似于

$window.location.href='/results.html'将执行页面重定向，因此将重新加载页面。
这不是@pcguru提到的在angular中执行此操作的方法，当您运行此行时，
$window.location.href='/results.html'浏览器会重新加载你的angular应用程序

Angular在用户单击页面上的链接时或通过设置
$location.path（“/someurl”）检测url中的更改（这是一个角度服务）。您的javascript绕过了这一点

注意

它[$location]不做什么

更改浏览器URL时，不会导致重新加载整个页面。
要在更改URL后重新加载页面，请使用较低级别的API，
$window.location.href

如果要以编程方式更改url，请使用
$location.path（url）
，如果希望用户在应用程序中单击链接并转到新位置，而无需浏览器重新加载页面，则需要使用
angular route.js
（）然后将
$routeProvider
注入应用程序的配置方法

(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'
         });
    }
}());

$window.location.href='/results.html'；这一行，你刚刚离开你的angular应用程序，所以它不知道。
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'
    });
}
]);

(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'
         });
    }
}());