AngularJS एनजी-src छवि

की शुरूआत नहीं मेरे app.js फ़ाइलAngularJS एनजी-src छवि

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; 
});

एचटीएमएल

<!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>

नीचे के लिए त्रुटि की सूची है (मैं नाम बदला कंट्रोलर.जेएस कोड में दिखाए गए 'बैंड' से 'बैंड' को सुनिश्चित करें, लेकिन यह सुनिश्चित नहीं है कि अभी भी क्यों पॉप अप हो रहा है:

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)

स्रोत

2016-12-29 Leni_14

समस्या है '$ scope.jumbotronImage = bandRef;' का प्रयोग करें '$ scope.jumbotronImage = jumbotronImage' – Tushar

@Tushar, क्यों गलत है? व्याख्या कर सकते हैं। धन्यवाद –

जैसा कि आप 'ng-src' में 'jumbotronImage.bandRef' का उपयोग कर रहे हैं,' jumbotronImage' एक ऑब्जेक्ट होना चाहिए और उस पर 'bandRef' प्रॉपर्टी के पास छवि पथ URL होना चाहिए। – Tushar

आप क्या करने की जरूरत

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

या अन्य तरीके से होगा:

$scope.jumbotronImage = jumbotronImage;

फिर HTML में :

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

स्रोत

2016-12-29 03:55:16

धन्यवाद लेकिन अभी भी दोनों तरीकों की कोशिश करने के बाद काम नहीं कर रहा है –

यह काम करने के लिए मिला इस कनेक्शन का उपयोग करने के बाद http: //192.168...in 127.0.0.1 –

परिवर्तनीय संदर्भ $scope.jumbotronImage = bandRef सही नीचे होना चाहिए। इसका अर्थ यह है कि jumbotronImage स्कोप वैरिएबल को jumbotronImage मानने के लिए {{jumbotronImage.bandRef}} कार्य करने के लिए मूल्य को प्रदर्शित करने के लिए निर्दिष्ट कर रहे हैं।

$scope.jumbotronImage = jumbotronImage.bandRef;

और फिर एचटीएमएल पर:

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

$scope.jumbotronImage = jumbotronImage;

स्रोत

2016-12-29 03:47:27

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

इसे ठीक करने के बाद इसे आज़माएं।

स्रोत

2016-12-29 04:11:59

का अध्ययन किया गया, क्या आप इसे और विस्तारित कर सकते हैं। –

आपको गलत संदर्भ दिया गया है 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 
});

स्रोत

2016-12-29 07:16:37

AngularJS एनजी-src छवि

उत्तर

संबंधित मुद्दे