Question

我正在开发一个指令，根据其模板中定义的点击事件（ng-click）显示和隐藏它的内容。在使用该指令的一些视图中，我希望能够知道该指令当前是显示还是隐藏它的内容，以便我可以响应DOM更改。该指令具有隔离范围，我试图在指令被“切换”时通知父范围。我试图通过将回调函数传递给使用它的指令来实现这一点，当指令的状态改变时可以调用它，即隐藏或显示

我不确定如何正确实现这一点，即指令的状态（隐藏或显示）存储在指令的隔离范围内，并在ng-click之后确定。因此，我需要从指令中调用父作用域的函数，而不是从视图中调用。

通过示例，这将使WAAY更有意义。以下是我想要做的事情：

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[])

app.controller('MainController', function($scope){
  $scope.myValue = 'test value';
  $scope.parentToggle = function(value){
    $scope.myValue = value;
  };
});

app.directive('toggle', function(){
    return {
            restrict: 'A',
            template: '<a ng-click="toggle();">Click Me</a>',
            replace: true,
            scope: {
                OnToggle: '&'
            },
            link: function($scope, elem, attrs, controller) {
                $scope.toggleValue = false;
                $scope.toggle = function () {
                    $scope.toggleValue = !$scope.toggleValue;
                    $scope.OnToggle($scope.toggleValue)
                };
            }
        };
});

我对Angular比较新。开始时这是一个坏主意吗？我应该使用服务还是其他东西而不是传递函数引用？

谢谢！

Answer 1

<强>更新

您还可以使用&绑定根作用域的功能（实际上是&的目的）。

为此，指令需要稍作修改：

app.directive('toggle', function(){
  return {
    restrict: 'A',
    template: '<a ng-click="f()">Click Me</a>',
    replace: true,
    scope: {
      toggle: '&'
    },
    controller: function($scope) {
      $scope.toggleValue = false;
      $scope.f = function() {
        $scope.toggleValue = !$scope.toggleValue;
        $scope.toggle({message: $scope.toggleValue});
      };
    }
  };
});

您可以这样使用：

<div toggle="parentToggle(message)"></div>

Plunk

您可以使用=绑定该函数。此外，请确保范围和标记中的属性名称匹配（AngularJS将CamelCase转换为破折号表示法）。

在：

scope: {
  OnToggle: '&'
}

后：

scope: {
  onToggle: '='
}

此外，请勿在主模板中使用on-toggle="parentToggle({value: toggleValue})"。您不想调用该函数，只是将函数的指针传递给指令。

Plunk

使用指令范围参数在指令父范围上调用函数

1 个答案: