[英]ng-click on ng-repeat in a directive
I am new to AngualrJS and I am having trouble getting a ng-click working inside a ng-repeat that sits inside a directive. 我是AngualrJS的新手,我无法在一个指令内的ng-repeat内部进行ng-click工作。
I use ng-repeat to display a list of PDFs and currently just trying to be able to click them to pop up an alert window. 我使用ng-repeat显示PDF列表,目前只是试图点击它们弹出一个警告窗口。 But I don't seem to be able to get any ng-click working within the directive.
但我似乎无法在指令中进行任何ng-click工作。
The Angular code: 角度代码:
var app = angular.module("aria", []);
app.directive("rdnglist", function(){
return {
restrict: 'E',
templateUrl: "rdnglist.html",
controller: function(){
this.pdfs = pdflist;
this.test = function() {
$window.alert("hi");
};
},
controllerAs: "plist",
};
});`
The HTML: HTML:
<div class="fullsect">
<div class="pdflist" ng-repeat="pdf in plist.pdfs">
<h3>{{pdf.name}}</h3>
<img ng-src="{{pdf.image}}" ng-click="test()"/>
<p>Class: {{pdf.class}}</p>
<div id="commentNo">{{pdf.comments}}</div>
</div>
<div class="pdflist">
<h3>New File</h3>
<a ng-click="test()">Open</a>
<img src="/pictures/addnew.png"/>
</div>
I assume it has something to do with the scope of the controller but I'm unsure. 我认为这与控制器的范围有关,但我不确定。 As I'm new, I learned to use
ControllerAs
over $scope
, is this the issue? 因为我是新手,我学会了在
$scope
使用ControllerAs
,这是问题吗?
Here is a working plunker based on your code. 这是一个基于您的代码的工作plunker。
I changed the directive to inject $window ... see ['$window, function($window) to make the alert work. 我更改了指令以注入$ window ...请参阅['$ window,function($ window)以使警报正常工作。 I also initialize with dummy data: The app:
我还用虚拟数据初始化:应用程序:
var app = angular.module('plunker', []);
app.directive("rdnglist", ['$window', function($window){
return {
restrict: 'E',
templateUrl: "rdnglist.html",
controller: function(){
this.pdfs = [{'name':'abc'}];
this.test = function() {
$window.alert("hi");
};
},
controllerAs: "plist",
};
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
And the rdnglist.htm... as you are using ControllerAs, you need plist.test(). 和rdnglist.htm ...当你使用ControllerAs时,你需要plist.test()。 To reduce my work I hardcoded an AngularJS image:
为了减少我的工作,我对AngularJS图像进行了硬编码:
<div class="fullsect">
<div class="pdflist" ng-repeat="pdf in plist.pdfs">
<h3>{{pdf.name}}</h3>
<a ng-click="plist.test()"><img ng-src="http://code-maven.com/img/angularjs.png" /></a>
<p>Class: {{pdf.class}}</p>
<div id="commentNo">{{pdf.comments}}</div>
</div>
<div class="pdflist">
<h3>New File</h3>
<a ng-click="test()">Open</a>
<img src="/pictures/addnew.png"/>
</div>
</div>
index.html: index.html的:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<rdnglist></rdnglist>
</body>
</html>
let us know if that helps. 如果有帮助,请告诉我们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.