非控制器ng-click函数在指令中不起作用

Non-controller ng-click function not working in directive

本文关键字：指令 不起作用 函数 控制器 ng-click      更新时间：2023-09-26

这是对我实际问题的简化。

当按钮被点击时，它的父对象将有一个红色背景。该函数不是控制器函数，它只是一个简单的视图。当按钮不在指令中时，这将按预期工作。然而，当在指令中使用时，它不起作用。我知道这是一个范围问题，也是一个简单的解决方案，但我是个傻瓜。

我看到过类似问题的解决方案，但所有这些都是基于控制器的点击功能。

下面是一个plunker：http://plnkr.co/edit/NZPSejy6vh2n4gYETHuX?p=preview

有角度的东西：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.boxes = [
    {
      id: 1
    },
    {
      id: 2
    },
    {
      id: 3
    }
  ];

});
app.directive('box', function() {
  return {
    templateUrl: 'box.html',
    scope:{
      makeRed: '@'
    }
  };
});

视图：

<body ng-controller="MainCtrl">
    <div class="box-wrapper" ng-repeat="box in boxes" ng-class="{redbox: isRed}">
      <box 
          make-red="isRed = !isRed"
      >
      </box>
    </div>
  </body>

指令模板：

<div class="box">{{$index + 1}}</div>
<button ng-click="{{makeRed}}">Click me</button>

样式：

.box {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid black;
  text-align: center;
  font-size: 30px;
  background-color: white;
}
.box-wrapper {
  width: 150px;
  height: 100px;
  padding: 20px;
  border: 2px solid blue;
  margin-bottom: 20px;
}
.redbox {
  background-color: red;
}

你说得对，这是一个范围问题。

要使用与父级相同的作用域，必须在指令中将作用域设置为false，如下所示：scope: false。

由于您访问了父对象的作用域，因此也可以对其进行修改

<div class="box">{{$index + 1}}</div>
<button ng-click="isRed = !isRed">Click me</button>

编辑

建议使用CCD_ 2同样有效。

指令名为：

scope: {
    makeRed: '='
}

指令的初始化：

<box make-red="isRed"></box>

以及指令模板：

<div class="box">{{$index + 1}}</div>
<button ng-click="makeRed = !makeRed">Click me</button>

工作柱塞：http://plnkr.co/edit/EReOf4NMZ2IpMjRnIRVN?p=preview

问题是您试图从指令中计算父级中的表达式。

您当前正在使用具有隔离作用域的@。这是从父指令到指令的单向绑定。

要传递表达式，您将使用&

工作柱塞http://plnkr.co/edit/2LWeSiOmjNwMmgPwL7P5?p=preview

Angular$编译文档。

相关文章：