Question

我的模板html中有一个变量（从php端创建）我需要在我的angular指令中使用这个变量（目的是用php侧面的值创建一个带有jquery flot的图表）。

我的HTML：

<script type="text/javascript">
    var graphData = [{
             data : [[1375574400000, 20], [1375660800000, 30], [1375747200000, 35], [1375833600000, 39], [1375920000000, 45]],
             color: '#478e9c'
            }];
</script>

那么，我如何在angular指令中使用这个变量？（我不想在我的指令中进行Ajax调用）

谢谢！

Answer 1

您希望在控制器和指令之间建立连接。

控制器：

$scope.graphData = $http({ ... make your request });

指令：

// Add the scope attribute linked to your controller variable

.directive('thingy', function() {
    return {
        scope: { 
            graphData: "=graphData"
        },
        link: function(scope, elem, attr) {
            ...
        }
    }
});

如果这不允许您访问范围变量，则可能需要使用“@”或“＆amp;”而不是指令范围声明中的'='。另一种选择是从你的指令使用的html元素中获取访问权限。像这样：

<div thingy graphData="graphData"></div>

Answer 2

好的，我回来时有更多的经验。它是在HTML中声明服务并在指令中使用它的最佳解决方案。

HTML：

<script type="text/javascript">
    var graphData = [{
             data : [[1375574400000, 20], [1375660800000, 30], [1375747200000, 35], [1375833600000, 39], [1375920000000, 45]],
             color: '#478e9c'
            }];
    app.value("GraphDatas", graphData);
</script>

在JS中：

app.directive("graph", ['GraphDatas', function(GraphDatas) {
   // do stuff with my tab GrapDatas
}]);

感谢非常好的书http://shop.oreilly.com/product/0636920028055.do
有关服务的文档：http://docs.angularjs.org/api/AUTO。$ provide

使用jQuery Flot在HTML和AngularJS Directive之间共享变量

2 个答案: