脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 Controllers(控制器)
app/js/controllers.js:
复制代码
'use strict';
/* Controllers */
VAR phonecatControllers = Angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scoPE', '$http',
function($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneid + '.json').success(function(data) {
$scope.phone = data;
$scope.mainImageUrl = data.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);
复制代码
注:控制器这里定义了一个setImage方法,就是将mainImageUrl的值设置为当前imageUrl.
CSS(样式)
app/css/app.css
cursor: pointer;
}
改变鼠标移动上去的样式为指针形.
Template(模板)
app/partials/phone-detail.htML
复制代码
<img ng-src="{{mainImageUrl}}" class="phone">
...
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
这里定义了一个ng-click方法,这里将当前的img作为参数传过去,然后,setImage方法将mainImageUrl的值替换为当前点击的图片,从而实现点击小图片,左边的图片被放大.
测试:
test/e2e/scenarios.js
复制代码
...
describe('Phone detail view', function() {
...
IT('should display the First phone image as the main phone image', function() {
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img//phones//nexus-s.0.jpg/);
});
it('should swap main image if a thumbnail image is clicked on', function() {
element(by.css('.phone-thumbs li:nth-child(3) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img//phones//nexus-s.2.jpg/);
element(by.css('.phone-thumbs li:nth-child(1) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img//phones//nexus-s.0.jpg/);
});
});
复制代码
执行如下命令进行测试:
复制代码
npm run PRotractor
#测试结果如下:
------------------------------------
PID: 4250 (capability: chrome #1)
------------------------------------
Using ChromeDriver directly...
.......
Finished in 9.867 seconds
7 tests, 11 assertions, 0 failures
复制代码
.实验:
在Controllers中的PhoneDetailCtrl加入:
$scope.hello = function(name) {
alert('Hello ' + (name || 'world') + '!');
}
同时在Phone-detail.html中加入:
<h1>{{phone.name}}</h1>
<button id="{{phone.name}}" ng-click="hello(phone.name)">Hello</button>
<p>{{phone.description}}</p>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10全部内容，希望文章能够帮你解决javascript代码实例教程-AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。