angular 如何将数据从父指令带到子指令

Question

我有 2 个指令 "chart" 和 "datapoint"。这里的图表指令是数据点指令的父级。我正在尝试将父指令中的一些数据传递给子指令，但它会引发错误。

这是我的指示：

"user strict";

angular.module("chartDirective", [])
    .directive('chart', function () {
        return {
                replace:true,
                transclude : true,
                templateUrl : '/views/directiveViews/svg.html',
                controller : function ($scope, $element, $attr) {
                    this.name="Afzil"; //setting up name.
                }
            }
    })

    .directive('datapoint', function () {
        return {
            replace : true,
            require :'^chart',
            template : '<circle cx="20" cy="20" ng-attr-r="{{radius}}" ng-attr-stroke-width="{{strokeWidth}}" fill="#FFF" stroke="#5B90BF" />',
            link : function (scope, element, attr, controller) {
                scope.radius = 4;
                scope.strokeWidth = 3;
                console.log(controller); //trying to console.
            }
        }
    })

我得到的错误是：

https://docs.angularjs.org/error/$injector/unpr?p0=$attrProvider%20%3C-%20$attr

但是使用这个 link，我无法找到解决方案。有人知道问题出在哪里吗？

Answer 1

这是因为您正试图将 $attr 传递给您的控制器。没有 $attr。在 link 函数中，$attr 是使您可以访问指令属性的第三个参数。

来自 angular 指令指南：

Savvy readers may be wondering what the difference is between link and controller. The basic difference is that controller can expose an API, and link functions can interact with controllers using require.

Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.

这里演示了如何将属性值从父控制器（使用 require）传递给子指令。

Plunker Demo

app.directive('chart', function () {
        return {
                replace:true,
                scope: true,
                controller : function ($scope, $element, $attrs) {
                    this.name="Afzil"; //setting up name.
                    this.myAttrVal = $attrs.myAttr;
                }
            }
    })

    .directive('datapoint', function () {
        return {
            replace : true,
            scope: true,
            require :'^chart',
            template : '<div>{{valFromChart}}</div>',
            link : function (scope, element, attr, chart) {
                scope.radius = 4;
                scope.strokeWidth = 3;
                scope.valFromChart = chart.myAttrVal;
                console.log('from chart: ' + chart.myAttrVal); //trying to console.
            }
        }
    })

在数据点指令中，我们传递了一些任意值作为我们已经 require 的控制器的别名。然后我们可以访问连接到该控制器的任何东西。

angular 如何将数据从父指令带到子指令

How to bring data from parent directive to child directive in angular

angularjs

angular-directive