不要使用Angular.min.js

Question

我知道有多个人问过这个问题而且我已经尝试了他们的解决方案，但它没有帮助。我正在尝试使用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;
   });

的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>

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

Answer 1

不要使用Angular.min.js

Angular的缩小版本用于生产而非开发。它会给你很难读的错误。改变这一行

<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.js"></script>

JQuery的

有时候JQuery和Angular不会很好玩，所以尝试将你的Bootstrap转换为Angular Bootstrap。 Here是指向它的链接。

结论

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

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

1 个答案:

不要使用Angular.min.js

JQuery的

结论