角度：注意指令中的过滤值答案

【问题标题】：angular: watch for filtered value in directive角度：注意指令中的过滤值
【发布时间】：2014-06-22 15:34:35
【问题描述】：

我正在尝试实现一个根据给定值绘制图表的指令。我想从模板中传递绘图的数据。我有一个可行的解决方案，将数据传递到ng-model，然后我可以为此添加$scope.watch 语句。但这不适用于过滤数据，我不需要双向绑定。

理想情况下，html 应该如下所示：

 <chart ???????="list | filter" />

我猜该指令应该是这样的：

  return{
    restrict: 'C',
    link: function(scope, elem, attrs){
        var chart = null

        scope.$watch(????, function(v){
             if(!chart){
                chart = $.plot(elem, v , options);
                elem.show();
            }else{
                chart.setData(v);
                chart.setupGrid(); 
                chart.draw();
            }
        });
    }
};

有没有角度的方法来实现这一点？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-filter

【解决方案1】：

如何将过滤后的列表保存在控制器中的不同变量中？类似：

$scope.filteredList = $filter('yourFilter')($scope.list);

在 HTML 中：

<chart ????="filteredList" />

您只需要确保在list 更改时更新filteredList。

【讨论】：

谢谢，所以我必须手动更新filteredList？可以通过 Angular 的原生绑定来完成吗？
您可以将$watch 添加到list 的范围内，并在filteredList 发生变化时重新计算。

【解决方案2】：

在???? 变量上实际放置绑定怎么样：

<chart ???????="{{list | filter}}" />

您可能还想在指令中添加：

  return{
    restrict: 'C',
    scope: {
        ????: "@",
    },
    link: function(scope, elem, attrs){
        var chart = null

        scope.$watch(????, function(v){
             if(!chart){
                chart = $.plot(elem, v , options);
                elem.show();
            }else{
                chart.setData(v);
                chart.setupGrid(); 
                chart.draw();
            }
        });
    }
};

【讨论】：