javascript - AngularJS ng-src not launching image - Stack Overflow|江阴雨辰互联

My app.js file

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

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

For controller:

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

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

    $scope.jumbotronImage = bandRef;
});

For HTML

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

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

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

        <script type="text/javascript" src="bower_ponents/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="bower_ponents/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_ponents/angular-route/angular-route.min.js"></script>
        <!--script type="text/javascript" src="bower_ponents/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>

Below is the list of error (I renamed 'theBand' to 'bandRef' as shown in Controller.js code but not sure why is still popping up:

ReferenceError: theBand is not defined at new (controller.js:11) at Object.invoke (angular.js:4839) at Q.instance (angular.js:10692) at p (angular.js:9569) at g (angular.js:8878) at p (angular.js:9632) at g (angular.js:8878) at angular.js:8743 at angular.js:9134 at d (angular.js:8921)

My app.js file

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

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

For controller:

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

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

    $scope.jumbotronImage = bandRef;
});

For HTML

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

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

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

        <script type="text/javascript" src="bower_ponents/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="bower_ponents/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_ponents/angular-route/angular-route.min.js"></script>
        <!--script type="text/javascript" src="bower_ponents/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>

Below is the list of error (I renamed 'theBand' to 'bandRef' as shown in Controller.js code but not sure why is still popping up:

ReferenceError: theBand is not defined at new (controller.js:11) at Object.invoke (angular.js:4839) at Q.instance (angular.js:10692) at p (angular.js:9569) at g (angular.js:8878) at p (angular.js:9632) at g (angular.js:8878) at angular.js:8743 at angular.js:9134 at d (angular.js:8921)

Share Improve this question edited Dec 29, 2016 at 3:52 Tushar 87.3k21 gold badges163 silver badges181 bronze badges asked Dec 29, 2016 at 3:45 Leni_14 572 silver badges10 bronze badges

Problem is $scope.jumbotronImage = bandRef; Use $scope.jumbotronImage = jumbotronImage – Tushar Commented Dec 29, 2016 at 3:46
@Tushar, why is wrong? can pls explain.thanks – Leni_14 Commented Dec 29, 2016 at 3:48
As you're using jumbotronImage.bandRef in ng-src, jumbotronImage should be an object and bandRef property on it should have the image path URL. – Tushar Commented Dec 29, 2016 at 3:50
@Tushar sorry I tried that but not displaying the image still. I meant bandRef is representing the image source. thanks again for your quick response – Leni_14 Commented Dec 29, 2016 at 3:53
@ Tushar. yes jumbotronImage is Object and bandRef is property. still no luck – Leni_14 Commented Dec 29, 2016 at 3:56

| Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

Correct the variable reference $scope.jumbotronImage = bandRef should be like below. It means you are assigning jumbotronImage reference to jumbotronImage scope variable to expose jumbotronImage value on view to make {{jumbotronImage.bandRef}} working.

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

$scope.jumbotronImage = jumbotronImage;

You need to do:

$scope.jumbotronImage = jumbotronImage.bandRef;

And then on the HTML:

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

OR the other way would be:

$scope.jumbotronImage = jumbotronImage;

Then in the HTML:

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

you are given wrong reference $scope.jumbotronImage = bandRef; there is no variable like bandRef. refer this https://developer.mozilla/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
});

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

Try it once its working fine.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744256161a4565409.html

javascript - AngularJS ng-src not launching image - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - AngularJS ng-src not launching image - Stack Overflow

4 Answers 4

相关推荐