Javascript 将值从控制器传递到指令

我正在使用angularjs创建项目。我在创建自定义指令时遇到问题。实际上我想将值从控制器发送到指令，但我没有定义。这是我的密码：

这是指令

.directive('angularData', function ($parse) {
    return {
      template: false,
      scope: {
        chart: '=lineChartData'
      },
      restrict: 'EA',
      replace: true,
      link: function postLink(scope, element,attrs) {
        var canvas, context, chart, options;
        console.log(attrs)
        console.log(scope.chart) //undefiend
        console.log(chart) //undefiend
      }
    };
});

<canvas id="test" angular-data ="lineChartData" height="450" width="600"></canvas>

这是我调用指令的Html

.directive('angularData', function ($parse) {
    return {
      template: false,
      scope: {
        chart: '=lineChartData'
      },
      restrict: 'EA',
      replace: true,
      link: function postLink(scope, element,attrs) {
        var canvas, context, chart, options;
        console.log(attrs)
        console.log(scope.chart) //undefiend
        console.log(chart) //undefiend
      }
    };
});

<canvas id="test" angular-data ="lineChartData" height="450" width="600"></canvas>

在指令中的链接函数中，放置一个观察者：

模块'myApp'，[]； angularData指令，函数$q，$parse{ 返回{ //模板：false， 限制：“A”， //替换：正确， 链接：函数postLinkscope、元素、属性{ 范围.$watchattrs.angularData，函数值{ console.logvalue； }; } }; }; 角度。模块“myApp”。controllermyCtl，函数$scope{ $scope.lineChartData={a:2，b:test}； }; 在指令中的链接函数中，放置一个观察者：

模块'myApp'，[]； angularData指令，函数$q，$parse{ 返回{ //模板：false， 限制：“A”， //替换：正确， 链接：函数postLinkscope、元素、属性{ 范围.$watchattrs.angularData，函数值{ console.logvalue； }; } }; }; 角度。模块“myApp”。controllermyCtl，函数$scope{ $scope.lineChartData={a:2，b:test}； };

---

为什么不在指令中声明控制器？这样它就可以从控制器访问数据。。。即

return {
  template: false,
  scope: {
    chart: '=lineChartData'
  },
  controller: SomeController,
  controllerAs: 'vm',
  ...

---

然后您可以通过指令链接上的作用域访问控制器的数据。

为什么不在指令中声明控制器？这样它就可以从控制器访问数据。。。即

return {
  template: false,
  scope: {
    chart: '=lineChartData'
  },
  controller: SomeController,
  controllerAs: 'vm',
  ...

然后您可以通过指令链接上的作用域访问控制器的数据。

在html中，请尝试以下操作

<canvas id="test" angular-data line-chart-data="lineChartData" height="450" width="600"></canvas>

它应该在你的html中起作用。试试这个

<canvas id="test" angular-data line-chart-data="lineChartData" height="450" width="600"></canvas>

---

它应该在DOM元素内部工作，并像下面这样传递$scope变量：chart=lineChartData

---

希望这有帮助，gokd luck。

在DOM元素中，像这样传递$scope变量：chart=lineChartData

---

希望这有帮助，gokd luck。

这也不起作用这也不起作用@AlexanderMP:我想在一个页面上多次使用此指令是的，你可以这样做。对于每个元素，此链接功能都是单独的。这是读取指令的正确方法。我在自定义验证场景中使用了类似的代码。您可以访问元素以获取画布。@AlexanderMP:我想在一个页面上多次使用此指令是的，您可以这样做。对于每个元素，此链接功能都是单独的。这是读取指令的正确方法。我在自定义验证场景中使用了类似的代码。您可以访问元素以获取画布。