Question

我正在关注this tutorial，而我正处于角度路由部分。 Here is the code snippet。它在jsFiddle以及本地系统中正常运行。但是在控制台中出错。

如果jsfiddle链接不起作用，则代码如下：

app.js

angular.module('flapperNews', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'MainCtrl'
        });
        $urlRouterProvider.otherwise('home')
    }])
.factory(
    'posts', [function(){
        var o = {
            posts: []
        };
        return o;
    }]
    )
.controller('MainCtrl', [
    '$scope',
    'posts',
    function($scope, posts){
        $scope.posts = posts.posts;
        $scope.test = 'Hello World';

        $scope.posts = [
        {title: 'post 1', upvotes: 5},
        {title: 'post 2', upvotes: 2},
        {title: 'post 3', upvotes: 15},
        {title: 'post 4', upvotes: 9},
        {title: 'post 5', upvotes: 4}
        ];


        $scope.addPost = function(){
            if(!$scope.title || $scope.title === '') { return; }
            $scope.posts.push({
                title: $scope.title, 
                upvotes: 0,
                link: $scope.link,
            });
            $scope.link = '';
            $scope.title = '';
        };

        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };

    }
    ]);

index.html

<html>
<head>
    <title>My Angular App!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>

<body ng-app="flapperNews">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ui-view></ui-view>
        </div>
    </div>
    <script type="text/ng-template" id="/home.html">
    <div class="page-header">
    <h1>Flapper News</h1>
    </div>
    <div ng-repeat="post in posts| orderBy: '-upvotes'">
    <span class="glyphicon glyphicon-thumbs-up"ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
    <span style="font-size:20px; margin-left:10px;">
    <a ng-show="post.link" href="{{post.link}}">
    {{post.title}}
    </a>
    <span ng-hide="post.link">
    {{post.title}}
    </span>  
    </div>
    <form ng-submit="addPost()" style="margin-top:30px;">
    <h3>Add a new post</h3>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
    </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
    </div>
    <button type="submit" class="btn btn-primary">Post</button>
    </form>
    </script>
</body>
</html>

我在控制台中遇到的错误很大，一个是 - Uncaught Error: [$rootScope:infdig]

，另一个是Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'path/to/index.html#/home' cannot be created in a document with origin 'null'

由someone here完成，我也没有在ng-repeat中调用任何函数。请帮忙。

未捕获错误：路径中的[$ rootScope：infdig]和replaceState历史错误angular js状态管理

0 个答案: