我遇到了这个错误，我有一个用于创建条形图的自定义指令，它是从一个 json 文件生成的。
这是我的代码，我有一个 Index.Html 页面，其中一个 View 根据导航路由到内部 这是
Index.Html
<head>
<title>DiginRt</title>
<body ng-app="DiginRt" class=" pace-done" cz-shortcut-listen="true">
<div id="header-topbar-option-demo" class="page-header-topbar">
<div id="page-wrapper">
<div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
<div class="page-header pull-left">
<div class="page-title"> Dashboard</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="page-content" ui-view> // Here i load the view for the dashboards </div>
</div>
</div>
</div>
<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-ui.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" src="script/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script type="text/javascript" src="script/d3.js"></script>
<script src="script/angular-ui-router.min.js"></script>
<script type="text/javascript" src="script/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript" src="script/plumb.js"></script>
<script type="text/javascript" src="script/app.js"></script>
</body>
</html>
仪表板.HTML:
<body ng-controller="DashboardCtrl">
<div id="main_wrapper">
<div id="toolboxControl">
<div id="containerChart">
<ul>
<li> <a ng-click="addWidget()" href="#controlflow">Charts</a>
<div id="controlflow" class="containerChart">
<input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls...">
<div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable> <img class="toolheader" src="{{widget.Icon}}">
<div class="toolcontent">{{widget.name}}</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-controller="CustomWidgetCtrl" id="container" class="drop-container" ng-click="addEvent($event)" droppable>
<div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}">
<div class="box">
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right"> <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> </div>
</div>
<div class="box-content">
<!-- <bars data="40,4,55,15,16,33,52,20"></bars> -->
<bargraph id="d3bar" datajson="sample.json" xaxis-name="Year" xaxis-pos="905" yaxis-name="Frequency" yaxis-pos="12" d3-format=".0%">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
App.Js:
var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'Charts.html',
controller: 'DashboardCtrl'
})
});
routerApp.controller('DashboardCtrl', ['$scope', '$timeout',
function($scope, $timeout) {
$scope.gridsterOptions = {
margins: [20, 20],
columns: 4,
draggable: {
handle: 'h3'
}
};
$scope.dashboards = {
'1': {
id: '1',
icon: 'images/icons/chart_line.png',
name: 'Home',
widgets: [{
col: 0,
row: 0,
sizeY: 1,
sizeX: 1,
icon: 'images/icons/chart_line.png',
name: "Stocks per store"
}]
}
};
}
])
routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
function($scope, $modal) {
$scope.remove = function(widget) {
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
};
$scope.openSettings = function(widget) {
$modal.open({
scope: $scope,
templateUrl: 'chart_settings.html',
controller: 'chartSettingsCtrl',
resolve: {
widget: function() {
return widget;
}
}
});
};
}
])
var BarGraph = Class.create({
initialize: function(datajson, xaxisName, xaxisPos, yaxisName, yaxisPos, d3Format) {
this.datajson = datajson;
this.xaxisName = xaxisName;
this.xaxisPos = xaxisPos;
this.yaxisName = yaxisName;
this.yaxisPos = yaxisPos;
this.d3Format = d3Format;
},
workOnElement: function(element) {
this.element = element;
},
generateGraph: function() {
//d3 specific coding
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(this.d3Format);
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
var svg = d3.select(this.element).append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv(this.datajson, function(error, data) {
if (error) return console.warn(error);
//console.log(this.xaxisName);
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return +d.frequency;
})]);
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).append("text").attr("x", this.xaxisPos).attr("dx", ".71em").style("text-anchor", "end").text(this.xaxisName);
svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", this.yaxisPos).attr("dy", ".71em").style("text-anchor", "end").text(this.yaxisName);
svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
return x(d.letter);
}).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.frequency);
}).attr("height", function(d) {
return height - y(d.frequency);
});
}.bind(this));
}
});
routerApp.directive('bargraph', function() { // Angular Directive
return {
restrict: 'EA', // Directive Scope is Element
replace: true, // replace original markup with template
transclude: false, // not to copy original HTML DOM
compile: function(elem, attrs) { // the compilation of DOM is done here.
// It is responsible for produce HTML DOM or it returns a combined link function
// Further Docuumentation on this - http://docs.angularjs.org/guide/directive
console.log(attrs.id);
console.log(attrs.datajson);
var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
var newElem = $(html);
elem.replaceWith(newElem); // Replacement of the element.
var ourGraph = new BarGraph(attrs.datajson, attrs.xaxisName, attrs.xaxisPos, attrs.yaxisName, attrs.yaxisPos, attrs.d3Format);
ourGraph.workOnElement('#' + attrs.id);
// Work on particular element
ourGraph.generateGraph(); // here is the error!
}
}
});
最佳答案
您的 html 和脚本中缺少一些 Angular 代码。我做了几件事:
<html ng-app="routerApp">到html页面var routerApp = angular.module('routerApp', []);到js文件我创建了一个 PLUNK与结果。与您的代码唯一不同的是，我更容易找到 TSV 示例文件，而不是您在代码中引用的 JSON 文件。所以，我从 d3.json 改成了至 d3.tsv ，但这在这里真的不重要。我希望这会有所帮助。
关于javascript - 类型错误 : Cannot read property 'childNodes' of undefined angular，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27560826/
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="