All geek questions in one place

AngularJS ng-src does not start image

My app.js file

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

For the 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_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>

The following is a list of errors (I renamed 'theBand' to 'bandRef', as shown in the Controller.js code, but not sure why it still appears.

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

+5
source share
4 answers

You need to do:

 $scope.jumbotronImage = jumbotronImage.bandRef;

And then in the HTML:

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

OR otherwise it will be:

 $scope.jumbotronImage = jumbotronImage;

Then in HTML:

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

Correct the reference to the variable $scope.jumbotronImage = bandRef should be as shown below. This means that you assign jumbotronImage reference to the scope jumbotronImage variable to display the jumbotronImage value in the view to do the job {{jumbotronImage.bandRef}} .

 var jumbotronImage = { bandRef: "/images/band.jpg" }; $scope.jumbotronImage = jumbotronImage;
+3
source

you are given the wrong link $ scope.jumbotronImage = bandRef; no variable like bandRef. refer to 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 });
+1
source 
 $scope.jumbotronImage = function(){ bandRef: "/images/band.jpg" };

Try it as soon as it works.

0
source

Source: https://habr.com/ru/post/1262009/

More articles:


All Articles