Question

这是我实际问题的简化。

单击按钮时，其父级意图为红色背景。该函数不是控制器函数，它只是一个简单的视图。当按钮不在指令中时，这可以按预期工作。但是，当在指令中使用时，它不起作用。我知道这是一个范围问题，这是一个简单的解决方案，但我是一个旋钮。

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

这是一个掠夺者：http://plnkr.co/edit/NZPSejy6vh2n4gYETHuX?p=preview

Angular stuff：

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

Answer 1

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

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

由于您访问父级的范围，因此您也可以对其进行修改。然后模板box.html变为：

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

修改

使用=也有建议。

该指令成为：

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

Answer 2

问题是您正在尝试从指令中评估父表达式。

您目前正在使用@隔离范围。这是从父对象到指令的单向绑定。

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

工作人员 http://plnkr.co/edit/2LWeSiOmjNwMmgPwL7P5?p=preview

Angular $compile docs。

非控制器ng-click功能在指令中不起作用

2 个答案: