Directive in Angular not rendering on $state.go but is on initial load

问题

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

and calling the directive from the page with:

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

and

$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.

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.

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?

回答1:

Solution: turn off animations

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.

来源：https://stackoverflow.com/questions/31714066/directive-in-angular-not-rendering-on-state-go-but-is-on-initial-load

标签

angularjs

angularjs-directive