小编典典

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

angularjs

我正在开发一个指令,该指令根据在模板中定义的click事件(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比较陌生。首先这是一个坏主意吗?我应该使用服务还是其他东西而不是传递函数引用?

谢谢!


阅读 221

收藏
2020-07-04

共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>

朋克


您可以使用绑定功能=。另外,请确保您的范围和标记中的属性名称匹配(AngularJS将CamelCase转换为 破折号 )。

之前:

scope: {
  OnToggle: '&'
}

后:

scope: {
  onToggle: '='
}

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

朋克

2020-07-04