在父指令和子指令之间传递参数 [英] Pass argument between parent and child directives

问题描述

我有导航菜单的父指令和菜单链接的子指令.像这样:

<菜单链接/><菜单链接/></菜单>

在菜单指令中，我使用 ng-translucent 来添加 html.有没有办法将参数从菜单传递到所有菜单链接元素?例如，如果:

我希望所有菜单链接指令都能从父级获取该值.还有一件事:每个菜单链接都有自己的属性，所以它需要有自己的作用域.

解决方案

您可以使用 require，有关更多信息，请阅读 角度指令 doc.

参考示例了解更多信息:

angular.module('myApp', []).controller('MyController', MyController).controller('MyDirectiveController', MyDirectiveController).directive('myDirective', myDirective).directive('childDirective', childDirective)函数 MyController($scope) {}函数 MyDirectiveController($scope) {this.isDisabled = function() {返回 $scope.disabled;};}函数 myDirective() {返回 {限制:'E'，转置:真实，模板:'<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',范围: {禁用:'=?ngDisabled'},控制器:'MyDirectiveController'};}函数 childDirective() {返回 {限制:'E'，要求:'^^myDirective',模板: '<div>childDirective disabled: {{ disabled }}</div>',范围: {}，链接:函数(范围，元素，属性，myDirectiveCtrl){scope.disabled = myDirectiveCtrl.isDisabled();}};}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script><div ng-app="myApp"><div ng-controller="MyController"><my-directive ng-disabled="true"><child-directive></child-directive><child-directive></child-directive></my-directive>

I have parent directive for navigation menu and child directives for menu links. Something like this:

<menu>
  <menu-link />
  <menu-link />
</menu>

In menu directive I use ng-translucent to be able to add html. Is there any way to pass argument from menu to all menu-link elements? For example, if:

<menu ng-disabled='true'..

I want all menu-link directives to get that value from parent. One more thing: each menu-link have its own attributes, so it needs to have own scope.

解决方案

You can make use of require, for more info read the angular directive doc.

Refer the example for more info:

angular.module('myApp', [])
  .controller('MyController', MyController)
  .controller('MyDirectiveController', MyDirectiveController)
  .directive('myDirective', myDirective)
  .directive('childDirective', childDirective)

function MyController($scope) {

}

function MyDirectiveController($scope) {
  this.isDisabled = function() {
    return $scope.disabled;
  };
}

function myDirective() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',
    scope: {
      disabled: '=?ngDisabled'
    },
    controller: 'MyDirectiveController'
  };
}

function childDirective() {
  return {
    restrict: 'E',
    require: '^^myDirective',
    template: '<div>childDirective disabled: {{ disabled }}</div>',
    scope: {},
    link: function(scope, elem, attrs, myDirectiveCtrl) {
      scope.disabled = myDirectiveCtrl.isDisabled();
    }
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="MyController">
    <my-directive ng-disabled="true">
      <child-directive></child-directive>
      <child-directive></child-directive>
    </my-directive>
  </div>

</div>

这篇关于在父指令和子指令之间传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！