tra*_*sis 15 angularjs angularjs-ng-click
ng-click是否可以使用img标签？
<img ng-src="img" ng-click="openNewWindow(url)/>
myFunction在控制器中定义,并且$ scope可用...没有任何东西被调用; 有任何想法吗？
(我想在点击图像时打开一个新的标签/窗口,但我甚至没有进入我的功能)
谢谢你的任何信息
编辑 我在第一次提出这个问题时可能会匆匆忙忙.我现在知道为什么它在我的情况下不起作用:我正在使用jQuery操纵图像以获得某种"画廊"效果......(如果有人知道如何在AngularJS中执行此操作请将其启用).这是我正在谈论的HTML:
<div class="commercial-container">
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen2)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen3)" />
<img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen4)" />
</div>
在这里我使用jQuery创建淡入/淡出效果(显示一个图像,然后是下一个等等,无限期)
function fadeInLastImg(){
var backImg = $('.commercial-container img:first');
backImg.hide();
backImg.remove();
$('.commercial-container' ).append( backImg );
backImg.fadeIn();
};
所以我真正的问题是:
你当然可以提供一个更好的解决方案(也许是AngularJS)来改变这样的图像,如果你知道一个......
谢谢
Ed *_*ffe 24
是的,ng-click适用于图像.
如果没有进一步的代码,我无法告诉你为什么你的代码没有工作,但你粘贴的代码将myFunction在控制该元素的控制器范围内调用.
编辑
你绝对不需要为此使用jQuery,如果你这样做,它并没有真正考虑它的"角度"思维模式.
我的建议是做一个指令来做到这一点.我创建了一个带有简单示例的plunker.
这是一个总结:
注意:因为动画对您很重要,请确保包含ng-animatesrc并将其作为依赖项包含在应用程序模块定义中.使用相同版本的animate作为基本角度.
HTML
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
使用Javascript
angular.module("gallery", ['ngAnimate'])
现在为您的指令定义模板:
galleryPartial.html
<div class="container">
<img ng-src="{{image.url}}"
alt="{{image.name}}"
ng-repeat="image in images"
class="gallery-image fade-animation"
ng-click="openInNewWindow($index)"
ng-show="nowShowing==$index">
</div>
这个模板只是简单地说"我希望从范围内的'images'数组中列出的每个项目都有一个图像.src应该是url图像的属性,alt文本应该是名称.当我点击图像时,运行该openInNewWindow功能在数组中传递该图像的索引.最后,隐藏图像,除非将nowShowing变量设置为它们的索引."
还要注意上课fade-animation.这可以被称为任何东西,但这是我们稍后将用于在CSS中定义动画的类.
接下来我们编写指令本身.它非常简单 - 只需使用此模板,然后定义openInNewWindow函数,以及遍历nowShowing数组索引:
.directive('galleryExample', function($interval, $window){
return {
restrict: 'A',
templateUrl: 'galleryPartial.html',
scope: {
images: '='
},
link: function(scope, element, attributes){
// Initialise the nowshowing variable to show the first image.
scope.nowShowing = 0;
// Set an interval to show the next image every couple of seconds.
$interval(function showNext(){
// Make sure we loop back to the start.
if(scope.nowShowing != scope.images.length - 1){
scope.nowShowing ++;
}
else{
scope.nowShowing = 0;
}
}, 2000);
// Image click behaviour
scope.openInNewWindow = function(index){
$window.open(scope.images[index].url);
}
}
};
})
你会看到我已经使用了一个隔离范围来使这个指令可以重复使用并保持良好的分离.你不必这样做,但这是一个很好的做法.因此,指令的html也必须传递您想要放入图库的图像,如下所示:
的index.html
<body ng-controller="AppController">
<div gallery-example="" images="imageList"></div>
</body>
所以我们需要编写的最后一点javascript是填充AppController范围内的图像数组.通常,您使用服务从服务器或其他东西获取图像列表,但在这种情况下,我们将对其进行硬编码:
.controller('AppController', function($scope){
$scope.imageList = [
{
url: 'http://placekitten.com/200/200',
name: 'Kitten 1'
},
{
url: 'http://placekitten.com/201/201',
name: 'Kitten 2'
},
{
url: 'http://placekitten.com/201/202',
name: 'Kitten 3'
},
{
url: 'http://placekitten.com/201/203',
name: 'Kitten 4'
}
]
})
最后,造型.这也将定义动画(注意ng-hide类的使用等).我强烈建议你在这里阅读,因为这个(已经很久!)答案中的主题太大了:
.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove {
-webkit-transition:0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition:0.5s linear all;
display:block !important;
opacity:1;
}
| 归档时间： |
|
| 查看次数： |
71301 次 |
| 最近记录： |