学习AngularJS课程作业3

时间:2016-07-17 20:13:03

标签: javascript html angularjs

对于这部分作业,我需要显示一个jpeg,描述,yada yada yada的领导者列表。我得到的是一个空行;没有任何迹象表明该行中有任何内容。

我做了什么......

我包含了一个返回领导者名单的工厂......

services.js

.factory('corporateFactory', function() {
var corpfac = {};

        var leadership = [
            {
                name: "Peter Pan",
                image: 'images/alberto.png',
                designation: "Chief Epicurious Officer",
                abbr: "CEO",
                description: "Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections."
            },
            {
                name: "Dhanasekaran Witherspoon",
                image: 'images/alberto.png',
                designation: "Chief Food Officer",
                abbr: "CFO",
                description: "Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, Everything that runs, wins, and everything that stays, pays!"
            },
            {
                name: "Agumbe Tang",
                      image: 'images/alberto.png',
                designation: "Chief Taste Officer",
                abbr: "CTO",
                description: "Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, You click only if you survive my lick."
            },
            {
                name: "Alberto Somayya",
                image: 'images/alberto.png',
                designation: "Executive Chef",
                abbr: "EC",
                description: "Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!"
            }

        ];

        // Implement two functions, one named getLeaders,
        // the other named getLeader(index)
        // Remember this is a factory not a service
        corpfac.getLeaders = function(){
            return leadership;
        };

        corpfac.getLeader = function(index){
            return leadership[index];
        };

        return corpfac;

})

然后我创建了一个控制器,将来自services.js的领导者引入controllers.js。

controllers.js

angular.module('confusionApp')...
    .controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory){
        $scope.leaders= corporateFactory.getLeaders();
    }])

然后我放入了aboutus.html。一种循环通过领导者的方法。

aboutus.html

<div class="container" ng-controller="AboutController">
...
<div class="row row-content">
        <div class="col-xs-12 col-sm-9">
            <h2>Corporate Leadership</h2>
            <ul class="media-list">
                <li class="media" ng-repeat="leader in leaders">
                    <div class="media-left media-middle">
                        <a ui-sref="app.aboutus">
                            <img class="media-object img-thumbnail" ng-src={{leader.image}} alt={{leader.abbr}}>
                        </a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{leader.name}} 
                           <small>{{leader.designation}}</small></h2>
                           <p>{{leader.description}}</p>
                       </div>
                   </li>
               </ul>

           </div>
           <div class="col-xs-12 col-sm-3">
            <p style="padding:20px;"></p>
        </div>
    </div>

当我加载页面时,它显示为空白。我已经检查了2个不同的githubs上的答案,以确认我所做的是对的,他们都有与我相同的答案。

有什么我没有得到的吗?我在Javascript控制台中没有收到任何错误,所以我不知道那里是否有错误。

最后,我知道这会提出很多要求,但我需要在这个网站上提问,所以如果你不介意提出意见,我会非常感激。我在过去的问题上得到了0和1,他们威胁要让我不再问任何问题。那个悲伤和绝望的插头已经足够了。我期待着任何和所有的答案。谢谢你的帮助。

重新编辑:这次我把整个工厂都包括在内,因为有一些问题。此外,澄清关于我们页面的其余部分打印就好了。只有公司领导层的部分是空白的。它实际上是“企业领导”,然后在页面的其余部分呈现之前有一个很大的空白空间。我正在尝试创建一个plunker来重新创建它。

2 个答案:

答案 0 :(得分:0)

代码中的所有内容都很好,check this small fiddle包含您的代码段:

angular.module('confusionApp',[])
.controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory){
        $scope.leaders= corporateFactory.getLeaders();
    }])

[]结尾只添加了angular.module('confusionApp'),一切都很好。

如果问题是其他原因,请告诉我。

答案 1 :(得分:0)

在尝试了由BeingSuman提出的建议然后将其还原后(提供的解决方案导致页面根本不加载),页面加载完全符合预期。很奇怪,我知道。但它奏效了。非常感谢所有加入我们帮助的人。