Angularjs ng-click()不是从ng重复指令发出的。

时间:2022-10-22 08:43:24

I am trying to trigger test() using ng-click but it's not working. The test() function works with ng-click elsewhere though, so I am assuming that it has to do with the fact that it is an ng-repeated directive.

我正在尝试使用ng-click触发test(),但它不起作用。test()函数在其他地方也可以使用ng-click,因此我假设它与它是一个反复使用ng的指令有关。

See in Plunker

在砰砰作响

How do I fix this?

我怎么修复这个?

3 个解决方案

#1


2  

Your directive is using isolated scope, so it don't have access to it parent scope.

您的指令使用的是独立范围,因此它不能访问它的父范围。

You need to pass the method to directive from its isolated scope using &

您需要使用&将方法传递到其独立范围的指令

<div ng-repeat="day in thisMonth track by $index">
    <drop-target index="$index" day="day" method="test()"></drop-target>
</div>

Directive

指令

angular.module('app.directives.dropTarget', [])
  .directive('dropTarget', function() {
  return {
    restrict: 'E',
    scope: {
      day: '=',
      index: '=',
      method: '&'
    },
    templateUrl: "calDay.html",
    controller: function($scope) {
      // not sure what this is
    }
  };
});

Directive template

指令模板

<div class="dayExercise" ng-repeat="item in day.array" ng-click="method()">
  {{item}}
</div>

Demo Plunkr

演示Plunkr

#2


1  

You need to defint the "test" function in directive's controller (right where you wrote "//don't know what is this")

你需要定义指令控制器中的"test"函数(就在你写的"//不知道这是什么"的地方)

#3


0  

Updated: http://plnkr.co/edit/mKnX6qpxQBy20JMssWHa?p=preview

更新:http://plnkr.co/edit/mKnX6qpxQBy20JMssWHa?p=preview

scope: {
        day: '=',
        index : '=',
        funcOnClick: '&'
      }

Your problem is a $scope problem. You have to pass the function to your directive.

你的问题是一个价值范围的问题。你必须把函数传递给指令。

#1


2  

Your directive is using isolated scope, so it don't have access to it parent scope.

您的指令使用的是独立范围,因此它不能访问它的父范围。

You need to pass the method to directive from its isolated scope using &

您需要使用&将方法传递到其独立范围的指令

<div ng-repeat="day in thisMonth track by $index">
    <drop-target index="$index" day="day" method="test()"></drop-target>
</div>

Directive

指令

angular.module('app.directives.dropTarget', [])
  .directive('dropTarget', function() {
  return {
    restrict: 'E',
    scope: {
      day: '=',
      index: '=',
      method: '&'
    },
    templateUrl: "calDay.html",
    controller: function($scope) {
      // not sure what this is
    }
  };
});

Directive template

指令模板

<div class="dayExercise" ng-repeat="item in day.array" ng-click="method()">
  {{item}}
</div>

Demo Plunkr

演示Plunkr

#2


1  

You need to defint the "test" function in directive's controller (right where you wrote "//don't know what is this")

你需要定义指令控制器中的"test"函数(就在你写的"//不知道这是什么"的地方)

#3


0  

Updated: http://plnkr.co/edit/mKnX6qpxQBy20JMssWHa?p=preview

更新:http://plnkr.co/edit/mKnX6qpxQBy20JMssWHa?p=preview

scope: {
        day: '=',
        index : '=',
        funcOnClick: '&'
      }

Your problem is a $scope problem. You have to pass the function to your directive.

你的问题是一个价值范围的问题。你必须把函数传递给指令。