Question

我有2个指令作为＆＃34;图表＆＃34;和＆＃34; datapoint＆＃34;。这里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

但是使用此链接，我无法找到解决方案。谁知道问题是什么？

Answer 1

这是因为你试图将$ attr传递给你的控制器。没有$ attr。在链接函数中，$ attr是第三个参数，它允许您访问指令的属性。

来自angular指令指南：

  精明的读者可能想知道链接和链接之间的区别   控制器。基本区别在于控制器可以公开API，   和链接函数可以使用require与控制器进行交互。

最佳实践：当您要将API公开给其他人时，请使用控制器   指令。否则使用链接。

以下是如何将父控制器（使用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.
            }
        }
    })

在datapoint指令中，我们传递一些任意值作为我们require'ed的控制器的别名。然后我们可以访问附加到该控制器的任何内容。

如何将父指令中的数据以角度形式引入子指令

1 个答案: