使用angularjs在onclick事件時加載圖片不起作用

我想在onclick事件時添加數據。需要在onclick事件時加載圖像，在一小段時間後添加數據。但我的形象不斷加載。任何機構都會提出任何建議。使用angularjs在onclick事件時加載圖片不起作用

我的代碼是：

<!DOCTYPE html> 
<head> 
<title>Learning AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> 
<script language="javascript"> 
    function ContactController($scope) { 
     $scope.contacts = [];  
     $scope.items = [ ]; 
     $scope.add = function() { 
      setTimeout(function() { 
       $scope.$apply(function() { 
        $scope.items[0].lateLoader = ' xxxx '; 
       }); 
      }, 1000); 
      $scope.count=$scope.count+1; 
      $scope.contacts.push($scope.newcontact); 
      $scope.newcontact = ""; 
     } 
    } 
</script> 
</head> 
<body > 
    <div ng-app="" ng-controller="ContactController"> 
     <p>{{items.lateLoader}} 
      <i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i> 
     </p> 
     {{ contacts.length }} 
     Content:<input type="text" ng-model="newcontact" /> 
     <button ng-click="add()">Add</button> 
     <ul style="list-style-type: none;"> 
      <li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2014-12-06 shilna mk

您正在使用的角一個很老的版本，並沒有正確實例化 - 我建議你先閱讀一些教程，並獲得正確的基本結構。此外，Angular提供了一個$超時，與其他Angular更好地發揮作用。 – 2014-12-06 10:15:08

在你的榜樣，我發現了很多錯誤。 HTML標籤沒有在頂部定義，錯誤地使用angularJs和Angular模塊沒有正確創建等。

我修復了所有的錯誤。我希望它能幫助你。

Plunkr鏈接：http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
     <title>Learning AngularJS</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
     <script > 
     angular.module("app",[]).controller('ContactController',['$scope', 
     function($scope) { 
     $scope.contacts = [];  
     $scope.items = []; 
     $scope.add = function() { 

     setTimeout(function() { 
     $scope.$apply(function() { 
     $scope.items.lateLoader = 'xxxx '; 
     }); 
     }, 1000); 
     //$scope.count=$scope.count+1; 
     $scope.contacts.push($scope.newcontact); 
     $scope.newcontact = ""; 
     } 
    } 
    ]); 
    </script> 
    </head> 
<body > 
<div ng-controller="ContactController"> 
<p>{{items.lateLoader}} 
    <i ng-hide="items.lateLoader"> 
     <img src="https://encrypted-tbn1.gstatic.com 
    /images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM"> 
    </i> 
</p> 
{{contacts.length}} 
Content:<input type="text" ng-model="newcontact" /> 
<button ng-click="add()">Add</button> 
    <ul style="list-style-type: none;"> 
    <li ng-repeat="contact in contacts"> 
    <input name="" type="checkbox" value="">{{ contact }} 
    </li> 
    </ul> 
    </div> 
    </body> 
</html>

而對於angularJs的更多細節，請訪問以下鏈接：
（https://angularjs.org/）
（http://www.w3schools.com/angular/default.asp）

來源

2014-12-08 10:53:24 Abhishek

使用angularjs在onclick事件時加載圖片不起作用

回答

相關問題