Question

我怀疑这是一个错误编写的表达式或控制器从服务中获取数据的方式。顺便说一句，控制器已经过测试，它的工作正常。请帮忙。

这是我的观点

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/vendor/angular.min.js"></script>
<!-- Installing the ngRoute module -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
</head>
<body ng-app="SuggestionBox">
    <div class="suggestion" ng-controller="HomeController">
        <div class="container" ng-repeat="post in posts">
        <h2 class="title">{{ post.title }}</h2>
        </div>
    </div>

<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>

以下是我从

获取数据的服务

app.factory('suggestions', [function() {
var demoSuggestions = {
    posts: [
        {
            title: "bla bla bla",
        },
        {
            title: "blo blo blo",
        }
    ]
};
return demoSuggestions;
}]);

这是控制器

app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
$scope.posts = suggestions.demoSuggestions;
}]);

Answer 1

在服务中，您应该分配已在posts工厂对象中返回的suggestions。

<强>控制器

app.controller('HomeController', ['$scope', 'suggestions', 
  function($scope, suggestions) {
     $scope.posts = suggestions.posts;
  }
]);

Demo here

<强>更新

你app.js应该定义如下的模块

var  app = angular.module('SuggestionBox',[])

修改

我做了最后一个用来证明OP面临的问题。理想情况下，您应该遵循John Papa提出的angular styleguide

在这里，您需要将每个组件代码包装为IIFE模式，如

(function(){ //code here })()

并定义角度module一次并在之后使用它们，避免创建全局变量。

AngularJS Expression不显示来自服务的数据

1 个答案: