在使用angularjs onclick事件时载入图片不能正常工作 [英] Loading image at the time of onclick event using angularjs is not working
本文介绍了在使用angularjs onclick事件时载入图片不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在时的onclick 事件添加数据。需要onclick事件的时间来加载图像，一个小的时间间隔添加数据之后。但我的形象不断加载。任何机构给出任何建议。
我的code是：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;学习AngularJS＆LT; /标题＆GT;
＆LT;脚本SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的＆GT;
功能的ContactController（$范围）{
$ scope.contacts = [];
$ scope.items = [];
$ scope.add =功能（）{
的setTimeout（函数（）{
$范围。$应用（函数（）{
$ scope.items [0] = .lateLoader'XXXX';
}）;
}，1000）;
$ scope.count = $ scope.count + 1;
$ scope.contacts.push（$ scope.newcontact）;
$ scope.newcontact =;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-应用=NG控制器=ContactController中＆GT;
＆所述p为H.; {{items.lateLoader}}
＆所述;我纳克隐藏=items.lateLoader＆GT;＆下; IMG SRC =充填破ring.gif＆GT;＆下; / I GT;
＆所述; / P＆GT;
{{contacts.length}}
内容：LT;输入类型=文本NG模型=newcontact/＆GT;
＆LT;按钮NG点击=增加（）＆gt;添加＆LT; /按钮＆GT;
＆LT; UL风格=名单样式类型：无;＆GT;
＆LT;李NG重复=中的联系人联系＆GT; ＆LT;输入名字=类型=复选框VALUE =＆GT; {{}接触}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
在你的榜样，我发现了很多错误。 HTML标记不是在顶部定义，未正确创建错误使用angularJs和角模块等。
我修复了所有的错误。我希望它可以帮助你。
Plunkr链接： http://plnkr.co /编辑/ no8WOHdEc9wc3dHzzITv？p = preVIEW
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;学习AngularJS＆LT; /标题＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
angular.module（应用程序，[]）。控制器（'的ContactController'，['$范围'，
功能（$范围）{
$ scope.contacts = [];
$ scope.items = [];
$ scope.add =功能（）{ 的setTimeout（函数（）{
$范围。$应用（函数（）{
$ scope.items.lateLoader ='XXXX';
}）;
}，1000）;
//$scope.count=$scope.count+1;
$ scope.contacts.push（$ scope.newcontact）;
$ scope.newcontact =;
}
}
]）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=ContactController中＆GT;
＆所述p为H.; {{items.lateLoader}}
＆LT;我NG-隐藏=items.lateLoader＆GT;
＆所述; IMG SRC =https://encrypted-tbn1.gstatic.com
/图像Q = TBN：ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM＆GT;
＆LT; I＆GT /;
＆所述; / P＆GT;
{{contacts.length}}
内容：LT;输入类型=文本NG模型=newcontact/＆GT;
＆LT;按钮NG点击=增加（）＆gt;添加＆LT; /按钮＆GT;
＆LT; UL风格=名单样式类型：无;＆GT;
＆LT;李NG重复=中的联系人联系＆GT;
＆LT;输入名字=类型=复选框VALUE =＆GT; {{联络}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
而对于angularJs的更多细节，请访问以下链接：结果（ https://angularjs.org/ ）结果
（ http://www.w3schools.com/angular/default.asp ）
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!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>
解决方案
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: 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>
And for more detail of angularJs please visit these links:
(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)
这篇关于在使用angularjs onclick事件时载入图片不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
