首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角度服务:视图更改时丢失的值

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

Stack Overflow用户
提问于 2015-05-05 19:25:14
回答 3查看 1.6K关注 0票数 3

我正在尝试构建一个简单的角度应用程序,它可以从Instagram获取数据。用户在索引页上输入一个hashtag,然后显示到另一个页面,其中显示带有该hashtag的帖子。

我尝试传递作为服务中的变量使用的哈希标记,但是当视图被更改时,值将被覆盖。(我可以在设置该值之后立即检查它,但一旦页面更改,我就会丢失该值)。

这是我的服务:

代码语言:javascript
运行
复制
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视图):

代码语言:javascript
运行
复制
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';
};

}]);

获取hashtag ( /results.html视图):

代码语言:javascript
运行
复制
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'
    });
}
]);
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-05 20:08:16

正如@pcguru所提到的,当您运行这一行$window.location.href = '/results.html';时,您的角度应用程序将被浏览器重新加载。

当用户单击页面上的链接或通过设置$location.path('/someurl'); (这是获取/设置url信息的角服务)时,Angular会检测url中的变化。你的javascript绕过了。

注意$location上的角度文档

$location不做什么? 当浏览器URL被更改时,它不会导致整个页面重新加载。若要在更改URL后重新加载页面,请使用低级API $window.location.href。

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

代码语言:javascript
运行
复制
(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'
         });
    }
}());
票数 3
EN

Stack Overflow用户

发布于 2015-05-05 19:35:12

您需要使用角的路由器来处理位置变化。这样,当您转到详细信息视图时,您将不会从头开始重新加载整个应用程序。

见角的路线文件

票数 2
EN

Stack Overflow用户

发布于 2015-05-05 19:45:20

在@pcguru的帮助下,您需要使用角路由器ui路由器来保持单个角页的上下文。

AngularRouter是角框架的一部分,使用简单。Ui-路由器是一种补充,它更具有协同性,允许您同时使用多个视图。如果你开始角度,这可能没有必要增加额外的复杂性。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30061562

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档