Javascript 参数'；d3Ctrl'；不是函数，未定义_Javascript_Angularjs_D3.js_Ng Controller

Javascript 参数'；d3Ctrl'；不是函数，未定义

javascript angularjs d3.js

Javascript 参数'；d3Ctrl'；不是函数，未定义,javascript,angularjs,d3.js,ng-controller,Javascript,Angularjs,D3.js,Ng Controller,我知道有很多人问过这个问题，我也尝试过他们的解决方案，但都没有用。我正在尝试使用d3，但它给了我以下错误： app.js var app = angular.module('myApp', []); 控制器 app.controller('d3Ctrl', ['$scope', function($scope) { $scope.myData = [10,20,30,40,60]; }]); 指令： app.directive('barsChart', function ($pars

我知道有很多人问过这个问题，我也尝试过他们的解决方案，但都没有用。我正在尝试使用d3，但它给了我以下错误：

app.js

var app = angular.module('myApp', []);

控制器

app.controller('d3Ctrl', ['$scope', function($scope) {
    $scope.myData = [10,20,30,40,60];
}]);

指令：

app.directive('barsChart', function ($parse) {
     //explicitly creating a directive definition variable
     //this may look verbose but is good for clarification purposes
     //in real life you'd want to simply return the object {...}
     var directiveDefinitionObject = {
         //We restrict its use to an element
         //as usually  <bars-chart> is semantically
         //more understandable
         restrict: 'E',
         //this is important,
         //we don't want to overwrite our directive declaration
         //in the HTML mark-up
         replace: false,
         link: function (scope, element, attrs) {
           //converting all data passed thru into an array
           var data = attrs.chartData.split(',');
           //in D3, any selection[0] contains the group
           //selection[0][0] is the DOM node
           //but we won't need that this time
           var chart = d3.select(element[0]);
           //to our original directive markup bars-chart
           //we add a div with out chart stling and bind each
           //data entry to the chart
            chart.append("div").attr("class", "chart")
             .selectAll('div')
             .data(data).enter().append("div")
             .transition().ease("elastic")
             .style("width", function(d) { return d + "%"; })
             .text(function(d) { return d + "%"; });
           //a little of magic: setting it's width based
           //on the data value (d) 
           //and text all with a smooth transition
         } 
      };
      return directiveDefinitionObject;
   });

app.directive（'barsChart'，函数（$parse）{
//显式创建指令定义变量
//这可能看起来很冗长，但有利于澄清
//在现实生活中，您只需返回对象{…}
var directiveDefinitionObject={
//我们将其使用限制为一个元素
//通常在语义上是这样的
//更容易理解
限制：'E'，
//这很重要,，
//我们不想覆盖我们的指令声明
//在HTML标记中
替换：false，
链接：函数（范围、元素、属性）{
//将通过的所有数据转换为数组
var data=attrs.chartData.split（'，'）；
//在D3中，任何选择[0]都包含组
//选择[0][0]是DOM节点
//但这次我们不需要了
var图表=d3.选择（元素[0]）；
//到我们的原始指令标记条形图
//我们添加一个带有out-chart stling的div，并绑定每个div
//图表的数据输入
图表。附加（“div”）.attr（“类”、“图表”）
.selectAll（'div'））
.data（data.enter（）.append（“div”）
.transition（）.ease（“弹性”）
.style（“宽度”，函数（d）{返回d+“%”；}）
.text（函数（d）{返回d+“%”；}）；
//一点魔力：设置它的宽度为基础
//关于数据值（d）
//和文本都具有平滑过渡
} 
};
返回directiveDefinitionObject；
});

index.html

    <head>
            <style>
                .chart {
                background: #eee;
                padding: 3px;
            }

                .chart div {
              width: 0;
              transition: all 1s ease-out;
              -moz-transition: all 1s ease-out;
              -webkit-transition: all 1s ease-out;
            }

                .chart div {
              font: 10px sans-serif;
              background-color: steelblue;
              text-align: right;
              padding: 3px;
              margin: 5px;
              color: white;
              box-shadow: 2px 2px 2px #666;
            }
            </style>

          <!-- Bring in Bootstrap css so things look nice by default -->

            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
            <script src="bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-resource.js"></script>

            <script type= "text/javascript" src="app.js"></script>
            <script type= "text/javascript" src="d3controller.js"></script>
            <script type= "text/javascript" src="d3directive.js"></script>

        </head>
<body>
     <div ng-controller="d3Ctrl">
          <bars-chart chart-data="myData"  ></bars-chart>
     </div>
</body>


.图表{
背景：#eee；
填充：3倍；
}
.海图组{
宽度：0；
过渡：所有1都放松；
-moz转换：所有1都放松；
-webkit转换：所有1都可以轻松完成；
}
.海图组{
字体：10px无衬线；
背景颜色：钢蓝色；
文本对齐：右对齐；
填充：3倍；
保证金：5px；
颜色：白色；
盒影：2px2px2p666；
}

我基本上是从互联网上复制了这个例子，它让我感到：错误：ng:areq错误参数参数“d3Ctrl”不是函数，未定义我不确定这里出了什么问题，如果我不添加这个，我的应用程序工作正常。有什么想法吗？任何帮助都将不胜感激

不要使用Angular.min.js Angular的缩小版是用于生产，而不是用于开发。它会给你带来难以阅读的错误。换行

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

到

JQuery 有时候JQuery和Angular不能很好地发挥作用，所以请尝试将您的vertion引导转换为Angular引导。是它的一个链接

结论对你的应用程序进行这些基本的修改，你可能会有一个更轻松的开发时间，这是我一直在使用的一个好的角度文件结构的链接。我还使用了AngularJS的AngularBootstrap和完整版本

不要使用Angular.min.js Angular的缩小版是用于生产，而不是用于开发。它会给你带来难以阅读的错误。换行

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

到

JQuery 有时候JQuery和Angular不能很好地发挥作用，所以请尝试将您的vertion引导转换为Angular引导。是它的一个链接

结论

对你的应用程序进行这些基本的修改，你可能会有一个更轻松的开发时间，这是我一直在使用的一个好的角度文件结构的链接。我还使用了AngularJS的AngularBootstrap和完整版本

谢谢乔的帮助！我没有正确保存文件，而且它没有读取正确的文件。所以我能够解决这个问题，有图表显示的暗示，但它还没有完全出现！抱歉，这不是你想要的直接答案，但我认为做这些事情会让错误变得更明显。谢谢乔的帮助！我没有正确保存文件，而且它没有读取正确的文件。所以我能够解决这个问题，有图表显示的暗示，但它还没有完全出现！抱歉，这不是你想要的直接答案，但我认为做这些事情会让错误变得更明显。