angularjs - style - kendo ui icons

Kendo UI Chart no se actualizará usando Angular

Question

Estoy usando k-data-source en un gráfico circular utilizando Kendo DataViz y las directivas angulares. Cuando cambio el objeto de fuente de datos en $ scope, no se actualiza y arroja errores. ¿Las directivas angulares estaban destinadas a ser utilizadas de esta manera?

Aquí hay un JSBin que muestra el problema: http://jsbin.com/OSudIzEH/9/edit

Código Angular

var app = angular.module(''chart-example'', [''kendo.directives'']);

function ChartController($scope) {
  $scope.pie = {
    title: {
        position: "bottom",
        text: "Share of Internet Population Growth, 2007 - 2012"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: #= value#%"
        }
    },
    series: [{
        type: "pie",
        field: "value",
        categoryField: "category"
    }],
    tooltip: {
        visible: true,
        format: "{0}%"
    }
  };

  $scope.updatePie = function() {
    $scope.countries = {
    data: [
        {
            category: "Asia2",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe2",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America2",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa2",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East2",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America2",
            value: 3.6,
            color: "#033939"
        }
    ]
  };
  };

  $scope.countries = {
    data: [
        {
            category: "Asia",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America",
            value: 3.6,
            color: "#033939"
        }
    ]
  };
}

HTML

<div ng-controller="ChartController">    
    <button ng-click="updatePie()">update</button>
    <div kendo-chart k-options="pie" k-data-source="countries" />

  </div>

Answer 1

Necesita crear un origen de datos de kendo y luego actualizar el objeto de datos para que funcione. JSBin ha sido actualizado con código de trabajo.

var app = angular.module(''chart-example'', [''kendo.directives'']);

function ChartController($scope) {
  $scope.pie = {
    title: {
        position: "bottom",
        text: "Share of Internet Population Growth, 2007 - 2012"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: #= value#%"
        }
    },
    series: [{
        type: "pie",
        field: "value",
        categoryField: "category"
    }],
    tooltip: {
        visible: true,
        format: "{0}%"
    }
  };

  $scope.updatePie = function() {
    $scope.countries.data([
        {
            category: "Asia2",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe2",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America2",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa2",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East2",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America2",
            value: 3.6,
            color: "#033939"
        }
    ]
  );
  };

  $scope.countries = new kendo.data.DataSource({
    data: [
        {
            category: "Asia",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America",
            value: 3.6,
            color: "#033939"
        }
    ]
  });
}

Answer 2

Eso parece un error en angular kendo para mí. Un problema es que los parámetros de toDataSource están en el orden incorrecto. Sin embargo, incluso después de corregir eso, el widget no se actualiza con el nuevo origen de datos. Hice algunos cambios en la secuencia de comandos de kendo-angular para que esto funcione (sin embargo, no tengo idea si esto encaja con el resto de sus características):

// Keep the element''s data up-to-date with changes.
// this will have to be $watchCollection in >= 1.1.4
scope.$watch(attrs.kDataSource, function (mew, old) {
    if (mew !== old) {
        element.data(''$kendoDataSource'',
            toDataSource(mew, type));

        var role = element.data("role");
        var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
        var w = element.data("kendo" + widgetType);

        if (!w) {
            w = kendo.widgetInstance(element, kendo.ui);
        }

        if (w && typeof w.setDataSource === "function") {
            w.setDataSource(element.data(''$kendoDataSource''));
        }
    }
}, true);

demo aquí