Question

我是AngualrJS的新手，我无法在指令中的ng-repeat内部进行ng-click工作。

我使用ng-repeat显示PDF列表，目前只是尝试点击它们以弹出警告窗口。但我似乎无法在指令中使用任何ng-click。

角色代码：

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",
    };
});`

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>

我认为它与控制器的范围有关，但我不确定。我是新手，我学会了使用ControllerAs而不是$scope，这是问题吗？

Answer 1

这是一个有效的plunker based on your code.

我将指令更改为注入$ window ...请参阅['$ window，function（$ window）以使警报正常工作。我也用虚拟数据初始化：该应用程序：

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';
});

rdnglist.htm ...当你使用ControllerAs时，你需要plist.test（）。为了减少我的工作，我对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：

<!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>

如果有帮助，请告诉我们。

在指令中单击ng-repeat

1 个答案: