ng-src沒有加載圖片

我怎樣才能使用ng-src加載圖片？我正在嘗試使用以下代碼替換onclick事件中的圖像文件的來源，但無濟於事。ng-src沒有加載圖片

<html ng-app="ui.bootstrap.demo"> 
    <body> 
     <pre>{{checkModel}}</pre> 
     <div class="btn-group"> 
      <!--   Add DB names to label --> 
      <label class="btn btn-primary" ng-model="checkModel.left" ng-click="toggleImage()" btn-checkbox><img ng-src="{{imageSwapUrl}}" />Left</label> 
      <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Middle</label> 
      <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Right</label> 
     </div> 
     <?php 
     // put your code here 
     ?> 
     <script> 
      angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
      angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) { 
       $scope.imageSwapUrl = "images/database-5-16.ico"; 
       $scope.checkModel = { 
        left: false, 
        middle: true, 
        right: false 

       }; 
       $scope.toggleImage = function() { 
        if ($scope.imageSwapUrl === 'images/database-5-16.ico') { 
         $scope.imageSwapUrl = 'images/accept-database-16.ico'; 
        } else { 
         $scope.imageSwapUrl = 'images/database-5-16.ico'; 
        } 
       } 




      }); 
     </script> 
    </body> 

</html>

最初的圖像文件，當我運行上面的代碼沒有被加載，但沒有錯誤顯示在控制檯日誌，這是什麼原因會是什麼？

來源

2015-06-08 b0w3rb0w3r

這可能只是你的示例代碼，但「ButtonsCtrl」是不是被在任何地方引用，因此控制器將不會被調用... – seanhodges

您能分享控制檯中顯示的錯誤嗎？ –

您在JavaScript中定義了一個控制器ButtonsCtrl，並且從未在標記中使用過它。所以，控制器內的代碼將永遠不會被調用。

<body ng-controller="ButtonsCtrl"> 
    ..... 
</body>

來源

2015-06-08 10:41:24

如果是這種情況，爲什麼'

{{checkModel}}

'工作？ – b0w3rb0w3r

如果在'ButtonsCtrl'控制器中定義了'$ scope.checkModel'，那麼是的。 –

你說得對，但現在我很困惑。爲什麼'{{checkModel}}'在控制器沒有在標記中定義但'{{imageSwapUrl}}'沒有特定的原因？謝謝。 – b0w3rb0w3r

你沒有定義控制器定義它

<html ng-app="ui.bootstrap.demo"> 

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="dummydisc/disc/styles/bootstrap.css" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script type="text/javascript" src="dummydisc/disc/scripts/ui-bootstrap-tpls-0.13.0.min.js"></script> 
    <style> 
    img#dbIcon { 
     margin: -1px 0px 0px; 
     position: absolute; 
     top: 2px; 
     left: 1px; 
    } 

    label.btn.btn-primary { 
     width: 65px; 
    } 
    </style> 
    <title></title> 
</head> 

<body ng-controller="ButtonsCtrl"> 
    <pre>{{checkModel}}</pre> 
    <div class="btn-group"> 
    <!--   Add DB names to label --> 
    <label class="btn btn-primary" ng-model="checkModel.left" ng-click="toggleImage()" btn-checkbox><img ng-src="{{imageSwapUrl}}" />Left</label> 
    <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Middle</label> 
    <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Right</label> 
    </div> 
    <?php // put your code here ?> 
    <script> 
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function($scope) { 
     $scope.imageSwapUrl = "images/database-5-16.ico"; 
     $scope.checkModel = { 
     left: false, 
     middle: true, 
     right: false 

     }; 
     $scope.toggleImage = function() { 
     if ($scope.imageSwapUrl === 'images/database-5-16.ico') { 
      $scope.imageSwapUrl = 'images/accept-database-16.ico'; 
     } else { 
      $scope.imageSwapUrl = 'images/database-5-16.ico'; 
     } 
     } 
    }); 
    </script> 
</body> 
</html>

工作示例here這不正是你的代碼

來源

2015-06-08 10:47:48 vamsikrishnamannem

ng-src沒有加載圖片

回答

相關問題