使用指令范围参数在指令父范围上调用函数 [英] Call function on directive parent scope with directive scope argument

问题描述

我正在开发一个指令，根据其模板中定义的点击事件（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（）;>点击我< / a>'，
替换：true，
范围：{
 OnToggle：'&'
}，
 link：function（$ scope，elem，attrs，controller）{
 $ scope.toggleValue = false; 
 $ scope.toggle = function（）{
 $ scope.toggleValue =！$ scope.toggleValue; 
 $ scope.OnToggle（$ scope.toggleValue）
}; 
} 
}; 
}）; 
  

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

谢谢！

解决方案

更新

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

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

  app .directive（'toggle'，function（）{
 return {
 restrict：'A'，
 template：'< a ng-click =f（）> Click Me< ; / a>'，
替换：true，
范围：{
切换：'&'
}，
控制器：函数（$ scope）{
 $ scope.toggleValue = false; 
 $ scope.f = function（）{
 $ scope.toggleValue =！$ scope.toggleValue; 
 $ scope.toggle（{message： $ scope.toggleValue}）; 
}; 
} 
}; 
}）; 
  

您可以像这样使用：

 < div toggle =parentToggle（message）>< / div> 
  

Plunk

---

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

之前：

 范围：{
 OnToggle：'&'
} 
  

之后：

 范围：{
 onToggle：'='
} 
  

此外，请勿使用主模板中的on-toggle =parentToggle（{value：toggleValue}）。你不想调用函数，只是将函数的指针传递给指令。

Plunk

I am developing a directive which shows and hides it's contents based on a click event (ng-click) defined in it's template. On some views where the directive is used I'd like to be able to know if the directive is currently showing or hiding it's contents so I can respond to the DOM changes. The directive has isolated scope and I am trying to notify the parent scope when the directive has been "toggled". I'm attempting to accomplish this by passing a callback function to the directive where it is used that can be called when the directive's state changes i.e hides or shows

I'm not sure how to correctly implement this being that the state of the directive (hidden or shown) is stored in the directive's isolated scope and is determined after the ng-click. Therefore I need to call the parent scope's function from within the directive and not from withing the view.

This will make WAAY more sense with an example. Here is a plunked demonstrating what I'd like to do:

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

I'm relatively new to Angular. Is this a bad idea to begin with? Should I be using a service or something rather than passing around function refs?

Thanks!

解决方案

Update

You can also use & to bind the function of the root scope (that is actually the purpose of &).

To do so the directive needs to be slightly changed:

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

You can use like this:

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

Plunk

---

You could bind the function using =. In addition ensure the property name in your scope and tag are matching (AngularJS translates CamelCase to dash notation).

Before:

scope: {
  OnToggle: '&'
}

After:

scope: {
  onToggle: '='
}

Furthermore don't use on-toggle="parentToggle({value: toggleValue})" in your main template. You do not want to call the function but just passing a pointer of the function to the directive.

Plunk

这篇关于使用指令范围参数在指令父范围上调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！