Question

我有一个指令设置为我渲染一些d3图表。这可以使用以下代码很好地工作：

angular.module('sc.directives')
    .directive("nvd3Chart", function () {
        'use strict';

        function lineChart(data) {...}
        function pnbChart(data) {...}

        return {
            restrict: "EA",
            template: '<svg></svg>',
            scope: '=chartData',
            transclude: true,
            link: function (scope, elem, attrs) {
                attrs.$observe('chartData', function (chartData) {
                    var data = JSON.parse(chartData);
                    if (data.graph_type === 'line') {
                        return lineChart(data);
                    } else if (data.graph_type === 'pnb') {
                        return pnbChart(data);
                    }
                })
            }
        }
    });

并从页面调用指令：

<nvd3-chart chart-data="{{ gdata }}"></nvd3-chart>

和

$scope.gdata = Graphs.getLocalGraphData($stateParams.dom + "." + $stateParams.cat + "." + $stateParams.met + "." + $stateParams.seg + "." + $stateParams.area);

或者如果在一页上使用指令并更改参数：

$scope.gdata = Graphs.getLocalGraphData("3.0." + $scope.selected.metric + "." + $scope.selected.segment + "." + $scope.selected.area);

当我直接链接到页面时，此工作正常。它甚至会在绑定变量执行时更新。

转换到带有指令的页面时，我遇到了困难（state1 - ＆gt; state2）;它似乎运行但它不输出任何东西。当我链接到具有工作指令的state1，转换到state2然后返回到state1并且指令将停止工作直到我更改绑定变量的值时，这也会出现。

登录到函数attrs.$observe将运行正常，但仍然没有输出（有效数据也是如此，因此id看起来不像缺少数据）。

感觉这是一个可变范围的问题，但有效数据似乎与此相矛盾，所以可能是配置问题？

Answer 1

解决方案：关闭动画

这是使用离子在cordova中构建的，无论出于何种原因，动画都会在这种情况下发生这种情况。关闭它们会使一切都按预期呈现。仍然在寻找一种允许动画的解决方案。

Angular中的指令不在$ state.go上呈现但在初始加载时

1 个答案: