Итак, я искал кого-то, кто пытался попробовать то же, что и я, но безуспешно... Итак, начнем. В ответ на сообщение Kendo Lab *Disclaimer*: While Angular Kendo UI is not supported under the formal Kendo UI support agreement, this is an active community project, and we would LOVE for you to open an issue, or fork the repo and submit a pull request. StackOverflow is also a great place to get assistance. У меня нет другого выбора, кроме как прийти на StackOverflow. Вот моя ситуация.
У меня есть угловая настройка кендо в моем веб-приложении, и она работает ОТЛИЧНО! (Немного кривой обучения, но так обстоят дела). Я хочу проверить, что директивы, которые я написал, работают правильно, и мне бы хотелось иметь возможность протестировать директивы кендо, которые я ищу.
Теперь для кода
изменить размер-directive.js
app.directive("ibsResizeGraphDirective", ['$window', function ($window) {
return function (scope, element) {
//Bind to window resize so that we can have the elements respond.
//There is no element.resize event and watching for width change doesn't work
angular.element($window).bind('resize', function () {
scope.$apply();
});
//Watch for element.width() change
scope.$watch(function () {
return $(element).width();
}, function (newValue, oldValue) {
if (newValue != oldValue) {
scope.graph.options.chartArea.width = $(element).width();
// Turn off transitions so that the graphs don't redraw everytime the window changes
if (oldValue != 0 && scope.graph.options.transitions) {
scope.graph.options.transitions = false;
}
scope.graph.refresh();
}
})
//...
};
}]);
как вы можете видеть, я пытаюсь в основном проверить размер элемента диаграммы и соответствующим образом установить chartArea.width.
Самая большая проблема, с которой я сталкиваюсь, это заставить график даже появиться. Чтобы упростить задачу с нашей стороны, мы решили заключить объявление диаграммы в директиву!
диаграмма.js
app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {
return {
// Restrict E for element
restrict: 'E',
// Here we setup the template for the code we want to replace our directive
template:"<div ibs-resize-graph-directive \n\
ibs-owner-warehouse-listener-directive \n\
ibs-graph-culture-caption \n\
kendo-chart='graph' \n\
k-options='chartOptions' \n\
k-data-source='dataSource' \n\
class='col-lg-4'/>",
replace: true,
scope: {
//...
},
controller: function($scope){
//...
},
link: function (scope, element, attrs) {
//...
};
}]);
и, наконец, мои тесты... в которых я даже не могу правильно отобразить свою диаграмму... так как же я должен проверить, изменилась ли ширина?!
изменить размер-test.js
//Setup items before each test
beforeEach(module('dynamanMain', 'kendo.directives'));
//Initialization Tests
it('should render the chart', angular.mock.inject(function ($compile, $rootScope, $timeout) {
var scope = $rootScope.$new();
ele = $compile('<ibs-chart-directive></ibs-chart-directive>')(scope);
scope.$apply();
//$timeout.flush();
//Test that the kendo grid was created over the div element
console.log(ele.find('div')); //This basically outputs nothing
}));
А вот скрин результата 
- Диаграмма не отображается (я знаю, что это потому, что я не добавляю ее к телу)
- После моих скриптов в теле нет элемента (который при выполнении angular-kendo тесты они появляются)
- Я получаю прототип, возвращенный из моего
element.find('div')
Это определенно более длинный пост, но я хотел быть как можно более тщательным, чтобы получить хороший ответ. У кого-нибудь есть мысли?
