AngularJS-更改路线时范围不刷新_Angularjs_Angularjs Scope

AngularJS-更改路线时范围不刷新

angularjs

AngularJS-更改路线时范围不刷新,angularjs,angularjs-scope,Angularjs,Angularjs Scope,一开始我很抱歉，我不知道怎么称呼它。我在寻找答案，但没有发现任何有用的东西，或者不知道如何在我的小应用程序中实现这一点。我正在学习AngularJS，我认为一个“饮料柜台”将是一个好的开始。因此，我的应用程序所能做的就是当你点击一个饮料图标时，它会添加一个项目（饮料类型和日期时间），问题是当我将路线更改为/#存档/时，它不会刷新饮料列表，我的代码是： var myApp = angular.module('myApp', ['ngRoute']); myApp.config(funct

一开始我很抱歉，我不知道怎么称呼它。我在寻找答案，但没有发现任何有用的东西，或者不知道如何在我的小应用程序中实现这一点。我正在学习AngularJS，我认为一个“饮料柜台”将是一个好的开始。因此，我的应用程序所能做的就是当你点击一个饮料图标时，它会添加一个项目（饮料类型和日期时间），问题是当我将路线更改为/#存档/时，它不会刷新饮料列表，我的代码是：

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

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'myController',
                templateUrl: 'Views/home.html'
            })
        .when('/archive',
            {
                controller: 'myController',
                templateUrl: 'Views/archive.html'
            })
        .otherwise({ redirectTo: '/' });
});

myApp.factory('myFactory', function () {
    var saved = localStorage.getItem('myData');
    var drinks = (localStorage.getItem('myData') !== null) ? JSON.parse(saved) : [];

    localStorage.setItem('myData', JSON.stringify(drinks));

    var factory = {};
    factory.getDrinks = function () {
        return drinks;
    };

    return factory;
});

var controllers = {};
controllers.myController = function ($scope, myFactory, $filter) {
    $scope.drinks = [];

    init();

    function init() {

        $scope.drinks = myFactory.getDrinks();

        $scope.beerDrinked = $filter('filter')($scope.drinks, 'beer').length;
    }

    $scope.nowDrinking = function (what) {
        $scope.drinks.push({
            drinkDate: new Date(),
            what: what
        });

        localStorage.setItem('myData', JSON.stringify($scope.drinks));
    };
}
myApp.controller(controllers);

当然可以。这是我存档中的HTML：

<ul class="drinked" data-ng-repeat="drink in drinks | orderBy: 'drinkDate':true track by $index">
    <li class="{{ drink.what }}"><span class="date">{{ drink.drinkDate | date: 'EEEE, d MMMM yyyy' }}</span><span class="time">{{ drink.drinkDate | date: 'HH:mm:ss'}}</span></li>
</ul>


{{drink.drinkDate}日期：'EEEE，d MMMM yyyy'}{drink.drinkDate}日期：'HH:mm:ss'}

这是在家里：

<span data-ng-bind="beerDrinked"></span>
<a href="#" class="btn-drink" data-ng-click="nowDrinkig('beer')">beer</a>

如果要刷新html，必须使用ng repeat，例如：

<div class="drinks" data-ng-repeat="drink in drinks"></div>

<button data-ng-click="addDrink(someDrink)"></button>

app.controller('MyController', function ($scope) {
   $scope.drinks = [];
   $scope.addDrink= function (drink) { //note that you don´t need(and don´t should) to pass your drink by parameter...
      $scope.drinks.push(drink);
   }

}))

在这里，将ng repeat放在li元素中，如下所示：

<ul class="drinked">
    <li data-ng-repeat="drink in drinks | orderBy: 'drinkDate':true track by $index" class="{{ drink.what }}"><span class="date">{{ drink.drinkDate | date: 'EEEE, d MMMM yyyy' }}</span><span class="time">{{ drink.drinkDate | date: 'HH:mm:ss'}}</span></li>
</ul>


{{drink.drinkDate}日期：'EEEE，d MMMM yyyyy'}{{drink.drinkDate:'HH:mm:ss}

试试看

谢谢你的回复，但问题不是他们没有添加，因为我有完全相同的方法，你提出的，但问题是，当我改变视图，我有一个旧的对象，它不包含最后的点击，当我刷新一切似乎都是好的。好的，我理解和提示你不需要“初始化”功能。。。你用的是ng repeat？你能把html放进去吗？是的，当然可以。这是我存档中的HTML：

{{drink.drinkDate | date:'EEEE，d MMMM yyyyy'}{{drink.drinkDate:'HH:mm:ss'}

[modelica]相关文章推荐

随机文章推荐