Question

我的app.js文件

angular.module('bandApp', ['ngRoute', 'RouteControllers']);

angular.module('bandApp').config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    });
});

对于控制器：

var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {

    var jumbotronImage = {
        bandRef: "/images/band.jpg"
    };

    $scope.jumbotronImage = bandRef;
});

对于HTML

<!Doctype html>
<html ng-app="bandApp">

    <head>
        <meta charset="utf-8">
        <title>Singing</title>

        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

        <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
        <!--script type="text/javascript" src="bower_components/a0-angular-storage/dist/angular-storage.min.js"></script>-->


    </head>

    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#/">myBand</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#/">Home</a></li>

                </ul>
            </div>
        </nav>
        <div ng-view>



            <!--adds a jumbotron-->
            <div ng-controller="jtronController">

                <!--adds a jumbotron
        <div class="container-full-bg" >-->

                <img ng-src="{{jumbotronImage.bandRef}}" />
            </div>
        </div>

        </div>
        <script src="js/app.js"></script>
        <script src="js/controller.js"></script>
    </body>

</html>

以下是错误列表（我已将其重命名为＆＃39; theBand＆＃39;至＆＃39; bandRef＆＃39;如Controller.js代码所示，但不确定为什么仍然会弹出：

ReferenceError：未定义theBand at new（controller.js：11）在Object.invoke（angular.js：4839）在Q.instance（angular.js：10692）在p（angular.js：9569）在g（angular.js：8878）在p（angular.js：9632）在g（angular.js：8878）在angular.js：8743 在angular.js：9134 在d（angular.js：8921）

Answer 1

更正变量引用$scope.jumbotronImage = bandRef应如下所示。这意味着您要为jumbotronImage范围变量分配jumbotronImage引用，以在视图上公开jumbotronImage值，以使{{jumbotronImage.bandRef}}正常工作。

var jumbotronImage = {
     bandRef: "/images/band.jpg"
};

$scope.jumbotronImage = jumbotronImage;

Answer 2

你需要这样做：

$scope.jumbotronImage = jumbotronImage.bandRef;

然后在HTML上：

<img ng-src="{{jumbotronImage}}" />

或者另一种方式是：

$scope.jumbotronImage = jumbotronImage;

然后在HTML中：

<img ng-src="{{jumbotronImage.bandRef}}" />

Answer 3

你被错误引用$ scope.jumbotronImage = bandRef;没有像bandRef这样的变量。请参阅此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

 var myCtrl = angular.module('RouteControllers', []);
.controller('jtronController', function($scope) {

    var jumbotronImage = {
        bandRef: "/images/band.jpg"
    };

    $scope.jumbotronImage = jumbotronImage; // this is correct way
});

Answer 4

$scope.jumbotronImage = function(){
 bandRef: "/images/band.jpg"
};

一旦工作正常就试试。

AngularJS ng-src没有启动图像

4 个答案: