Question

我试图使用Angular从零开始创建一个carousal。所以我的问题的html代码如下。

<div id = "section1" class = "" ng-app = "sliderApp">
    <div class = "sec1_slider" ng-controller = "app">
         <div class = "slider_image">
               <img ng-src="{{ imageUrlProfile }}" class = "sm_icon">

我已导入相关的API。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>

我的角色代码如下。

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

application.controller('app', function($rootScope, $scope) {

        $rootScope.imageUrlProfile = 'slider-img1.png';

});

在着陆页中，我在角度代码＆＃39; slider-img1.png＆＃39;中定义了图像。未加载并在浏览器控制台中引发以下错误。

angular.js：4073未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.3.5/ $ injector / modulerr？p0 = sliderApp＆amp; p1 = Refere ... ogleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.5％2Fangular .min.js％3A16％3A463）

Click here to see the link to the error.

我该怎么做才能加载图片？

修改：Here you can find the JSFiddle

Answer 1

问题是在config块中，您正在为控制器指定变量。但是变量尚未声明或赋值：

看看Plnkr：http://plnkr.co/edit/2kfnAMja5BWgKTWU9FHt?p=preview

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

application.controller('app', function($rootScope, $scope) {

        $rootScope.imageUrlProfile = 'http://www.amaraholisticwellbeing.com/wp-content/uploads/2015/01/Fall-beautiful-nature-22666764-900-562.jpg';

});

application.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/option1', {templateUrl: 'tab1.html'/**, controller: ProfileCtrl**/}).
            when('/option2', {templateUrl: 'tab2.html'/**, controller: WorkCtrl**/}).
            when('/option3', {templateUrl: 'tab3.html' /**,controller: EduCtrl**/}).
            when('/', {templateUrl: 'openingTab.html'}).
            otherwise({redirectTo: '/'});
}]);

你可以看到我在哪里注释掉了控制器。这些变量不存在于您的小提琴中给出的脚本中。我选择使用 Plnkr ，因为JSFiddle在尝试为图像发送正常的http请求（https很好）时遇到问题。

错误：$ injector：modulerr加载图像时的角度模块

1 个答案: