UI Angular Tab中的AngularJS自定义指令中的$ digest已在进行中

Question

在服装指令上试图在角度ui引导标签I getError: [$rootScope:inprog] $digest already in progress内建立一个morrischart。初始代码如下所示。

这是一个plunker

angular.module('ChartAngular', []).directive('linechart', function() {

        function createChart(el_id, options) {
          options.element = el_id;
          var r = new Morris.Line(options);
          return r;
        }

        return {
          restrict: 'E',
          scope:  {
            options: '='
          },
          replace: true,
          template: '<div></div>',
          link: function(scope, element, attrs) {
            return createChart(attrs.id, scope.options)
          }
        }

控制器

october.controllers['page/index'] = function ( $scope, $request) {


   $scope.chart_options = {
      data: [
        { y: '2006', a: 100, b: 90 },
        { y: '2007', a: 75,  b: 65 },
        { y: '2008', a: 50,  b: 40 },
        { y: '2009', a: 75,  b: 65 },
        { y: '2010', a: 50,  b: 40 },
        { y: '2011', a: 75,  b: 65 },
        { y: '2012', a: 100, b: 90 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Series A', 'Series B']  
    };

}

比阅读类似的问题，我试图在我的控制器中使用超时范围，如

october.controllers['publishers/index'] = function ( $scope, $request, $timeout) {

$timeout(function(){
   $scope.chart_options = {
      data: [
        { y: '2006', a: 100, b: 90 },
        { y: '2007', a: 75,  b: 65 },
        { y: '2008', a: 50,  b: 40 },
        { y: '2009', a: 75,  b: 65 },
        { y: '2010', a: 50,  b: 40 },
        { y: '2011', a: 75,  b: 65 },
        { y: '2012', a: 100, b: 90 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['Series A', 'Series B']  
    };

  }, 0);
}

但是指令选项没有传递数据

I get Error: options is undefined

还没有足够的AngularJS经验，所以试图找出如何使这些代码正常工作。

这似乎适用于每个标签一个图表

angular.module('ChartAngular', []).directive('linechart', function($timeout) {

    function createChart(el_id, options) {
      options.element = el_id;
      var r = new Morris.Line(options);
      return r;
    }

    return {
      restrict: 'E',
      scope:  {
        options: '='
      },
      replace: true,
      template: '<div></div>',
      link: function(scope, element, attrs) {
        scope.$watch("options", function() {
           if (scope.options) {                
                    $timeout(function() {
                        createChart(attrs.id, scope.options);
                    }, 3000)
                }
        });        
        //return createChart(attrs.id, scope.options)
      }
    }

  })