AngularJS

Question

所以，我正在使用 AngularJS 中的指令。我想要实现的是在单击按钮时调用指令的侦听器并从控制器传递一些数据。

这是我的指令（示例）

app.directive('graphVisualization', function() {
    var containerid = document.getElementById('left-graph-container');
    return {
        restrict: 'A',
        scope: {
          data: '=',
          val: '=',
        },
        link: function(scope, element, attrs) {
            scope.$watch('data', function(newVal, oldVal) {
                //listener code
            })
        }
    }

这是我的 HTML

<div graph-visualization data="graphdata" val="stability">
</div>
<div>
    <input type="button" value="Call" ng-click="setData(6)" />
</div>

这是我的控制器

app.controller('MainCtrl', ['$scope', function() {
    $scope.graphdata = ['time1', 'time2', 'time3'];
    $scope.setData() = function(val) {
        $scope.data = val;
        //now call the directive's listener code i.e. 'link' function and pass it '$scope.data'
    }
}])

因此，我需要将 $scope.data 从控制器传递到指令，然后运行使用该数据的 link 函数的代码。我在侦听器代码中所做的是使用 D3 渲染图形，我想使用每次单击按钮时发送的数据重新渲染该图形。我该怎么做？

Answer 1

你正在传递数据="graphdata"，为什么不传递数据="data"？

根据我使用 Angular 的经验，我发现使用子变量更有效地处理指令，而不是直接变量

不是：

$scope.data = val;

但是：

$scope.state = {};

$scope.setData() = function(val) {
    $scope.state.data = val;
}

并在 html 中传递 state.data:

<div graph-visualization data="state.data" val="stability"></div>

您并没有替换整个变量 $scope.data 的实例，而只是更新它的属性，因此 'data' 上的 watch in 指令将引用同一个实例。

你明白我的意思了:)

AngularJS - 在点击时调用指令的侦听器并将数据传递给它

AngularJS - call listener of directive on click and pass data to it

javascript

angular-directive

这是我的指令（示例）

这是我的 HTML

这是我的控制器