1

所以我四处寻找那些试图尝试我的人但没有运气的人......所以我们开始了。为了回应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

    }));

这是结果的屏幕截图 测试调试结果

  1. 没有呈现图表（我知道这是因为我没有将它附加到正文）
  2. 在我的脚本之后正文中没有元素（在进行角度剑道测试时它们会出现）
  3. 我从我的element.find('div')

这绝对是一篇较长的文章，但我想尽可能彻底地得到一个好的答案。有人有什么想法吗？

4

1 回答 1

0

我是个白痴。我没有正确定位指令。

 ele = $compile('<ibs-chart-directive></ibs-chart-directive>')(scope);

应该

 ele = $compile('<ibs-chart></ibs-chart>')(scope);

因为我的指令被定义为

app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {

由于进行了这些更改，我还能够完成测试并测试图表的宽度以及是否调用了调整大小功能......我喜欢在搜索了几天后找到类似的小东西...... ..

于 2014-04-28T15:28:22.960 回答