Question

我有一个模板的指令，该模板在锚标记上使用ng-repeat创建锚点库。每个锚点也有一个ng-click，当点击它时会调用父控制器功能。向该函数传递ng-repeat项。

问题：在父控制器方法中访问此项时未定义

这是一个模拟类似情况的测试场景

<testdirective func="show(x)" items="buttons"></testdirective>

http://plnkr.co/edit/43aNqFS71Jn9vOdh6AG2?p=preview

Answer 1

您需要进行两项更改。

index.html 中的

对您的功能提出了建议：

    <testdirective func="show" items="buttons"></testdirective>

并在 testdirective 中更改模板，如下所示：

  template: '<button ng-repeat="item in items" ng-click="func()(item)" id="submit" />{{item}}</button>',

注意ng-click中的变化 - 第一个括号是为了获得对函数本身的引用，第二个是用参数调用函数。

我还为你的傻瓜做了一个分叉： http://plnkr.co/edit/nECPbL8YoToi0jP9HJHQ?p=preview

请告诉我这是否是你想要实现的目标

Answer 2

您的指令应该绑定到控制器，按如下所示进行更改，

app.directive("testdirective", function() {
  return {
    restrict: "E",
    controller: 'testController',
    template: '<button ng-repeat="item in items" ng-click="show(item)" id="submit" />{{item}}</button>',
    scope: {
      items: "=",
      func: '&'
    }

  };
});

<强>样本

＆＃13;

// Code goes here

var app = angular.module('test', []);

app.controller('testController', function($scope) {

  $scope.buttons = ['b1', 'b2', 'b3', 'b4', 'b5'];

  $scope.show = function(x) {
    alert(x);
  }
})


app.directive("testdirective", function() {
  return {
    restrict: "E",
    controller: 'testController',
    template: '<button ng-repeat="item in items" ng-click="show(item)" id="submit" />{{item}}</button>',
    scope: {
      items: "=",
      func: '&'
    }

  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app='test'>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <div ng-controller="testController">
    <h1>Hello Plunker!</h1> {{ testValue }}
    
    <testdirective func="show(x)" items="buttons"></testdirective>
    </div>
</body>
</html>

＆＃13;

从指令模板传递到控制器时未定义的ng-repeat变量

2 个答案: