Question

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

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

这是我的服务：

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

我的两个控制员：

设置主题标签（/index.html视图）：

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视图）：

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';时，您的角度应用会被浏览器重新加载。

当用户点击页面上的链接或设置$location.path('/someurl');（getting/setting url information的角度服务）时，Angular会检测网址中的更改。你的javascript绕过了它。

请注意Angular docs on $location

[$ location]不做什么？

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

如果您想以编程方式更改网址，请使用$location.path(url)，如果您希望用户点击链接并转到应用中的新位置而浏览器不重新加载网页，则需要使用angular-route.js（https://code.angularjs.org/1.3.15/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'
         });
    }
}());

Answer 2

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

See angular's route documentation

Answer 3

在@pcguru的帮助下，您需要使用angular Router或ui-router来保留单个Angular Page的上下文。

AngularRouter是Angular框架的一部分，易于使用。 Ui-Router是一个补充，它更具有可共同性，允许您同时使用多个视图。如果您开始有角度，可能没有必要增加额外的复杂性。

使用类似$window.location.href = '/results.html';的内容将执行页面重定向，因此会重新加载您的页面。这不是角度

的方法

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

3 个答案: