Angular 中的指令未在 $state.go 上呈现，但处于初始加载状态 [英] Directive in Angular not rendering on $state.go but is on initial load

问题描述

我有一个指令设置来为我呈现一些 d3 图表.使用以下代码可以很好地工作:

I have a directive setup to render some d3 charts for me. This works well using the following code:

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);

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

or if using the directive on the one page and changing the parameters:

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

当我直接链接到页面时，这很好用.它甚至会在绑定变量执行时更新.

This works fine when I link to the page directly. It will even update when the bound variable do.

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

I am running to difficulties when transitioning to a page with the directive on it (state1 -> state2); it appears to run but it wont output anything. This also manifest when I link to state1 which has a working directive, transition to state2 and then go back to state1 and the directive will have stopped working until I change the values of the bound variables.

退出函数 attrs.$observe 将运行良好但仍然没有输出(有效数据也是如此，因此 id 看起来不像丢失数据).

Logging out into the function attrs.$observe will run fine but still no output (valid data too so id doesnt look like missing data).

感觉好像是变量范围的问题，但有效数据似乎与此矛盾，所以可能是配置问题?

It feels like it is a problem with variable scope however the valid data appears to contradict that, so maybe a configuration problem?

推荐答案

解决方案:关闭动画

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

This was build in cordova using ionic and for whatever reason, the animations casue this to happen in this instance. Turning them off makes everything render as expected. Still looking into a solution that will allow animations.

这篇关于Angular 中的指令未在 $state.go 上呈现，但处于初始加载状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！