如何$watch
在操作内部数据时触发Angular指令中的变量(例如,插入或移除数据),但不能为该变量分配新对象?
我当前正在从JSON文件加载一个简单的数据集.我的Angular控制器执行此操作,并定义了一些函数:
App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
// load the initial data model
if (!$scope.data) {
JsonService.getData(function(data) {
$scope.data = data;
$scope.records = data.children.length;
});
} else {
console.log("I have data already... " + $scope.data);
}
// adds a resource to the 'data' object
$scope.add = function() {
$scope.data.children.push({ "name": "!Insert This!" });
};
// removes the resource from the 'data' object
$scope.remove = function(resource) {
console.log("I'm going to remove this!");
console.log(resource);
};
$scope.highlight = function() {
}; …
Run Code Online (Sandbox Code Playgroud) 如何告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间?
我有一个3排flexbox布局.前两行是固定高度,但第三行是动态的,我希望它增长到浏览器的整个高度.
我在第3行中有另一个flexbox,它创建了一组列.要正确调整这些列中的元素,我需要它们来理解浏览器的整个高度 - 例如背景颜色和底部的项目对齐.主要布局最终将类似于:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}
Run Code Online (Sandbox Code Playgroud)
<body>
<div …
Run Code Online (Sandbox Code Playgroud)使用D3库将SVG元素置于z顺序顶部的有效方法是什么?
我的特定情况是一个饼图其中突出(通过添加stroke
到path
)当鼠标在给定的片.生成我的图表的代码块如下:
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.attr("fill", function(d) { return color(d.name); })
.attr("stroke", "#fff")
.attr("stroke-width", 0)
.on("mouseover", function(d) {
d3.select(this)
.attr("stroke-width", 2)
.classed("top", true);
//.style("z-index", 1);
})
.on("mouseout", function(d) {
d3.select(this)
.attr("stroke-width", 0)
.classed("top", false);
//.style("z-index", -1);
});
Run Code Online (Sandbox Code Playgroud)
我尝试过几个选项,但到目前为止还没有运气.使用style("z-index")
和调用classed
两者都不起作用.
"top"类在我的CSS中定义如下:
.top {
fill: red;
z-index: 100;
}
Run Code Online (Sandbox Code Playgroud)
该fill
声明是有,以确保我知道这是正确的开启/关闭.它是.
我听说使用sort
是一个选项,但我不清楚如何将"选定"元素置于顶部.
更新:
我使用以下代码修复了我的特殊情况,该代码在mouseover
事件上向SVG添加了一个新弧以显示突出显示.
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.style("fill", function(d) { return color(d.name); …
Run Code Online (Sandbox Code Playgroud) 我无法更新或卸载Visual Studio 2012的NuGet包管理器.我已经查看了几个解决方案,但没有找到一个有效的解决方案.
以管理员身份运行Visual Studio 2012 ...
尝试更新NuGet包管理器失败,并在日志末尾显示以下错误对话框:
2/5/2013 10:38:09 AM - 开始安装Microsoft Visual Studio Ultimate 2012扩展... 2013年2月5日上午10:38:09 - 将'NuGet Package Manager'版本2.0.30625.9003升级到版本2.2.31210.9045.2/5/2013 10:38:10 AM - 安装错误:System.IO.IOException:进程无法访问该文件,因为它正由另一个进程使用.在System.IO .__ Error.WinIOError(Int32 errorCode,String maybeFullPath)at System.IO .__ Error.WinIOError()at System.IO.File.InternalMove(String sourceFileName,String destFileName,Boolean checkHost)at Microsoft.VisualStudio.ExtensionManager. ExtensionManagerService.AtomicallyDeleteFiles(IEnumerable的
1 filePaths, Boolean justMarkForDeletion) at Microsoft.VisualStudio.ExtensionManager.ExtensionManagerService.DeleteDiscoverableFiles(IInstalledExtension extension) at Microsoft.VisualStudio.ExtensionManager.ExtensionManagerService.UninstallInternal(IInstalledExtension extension, Boolean forceDelete) at Microsoft.VisualStudio.ExtensionManager.ExtensionManagerService.CommitInstalledAndUninstalledExtensions(IEnumerable
1个installedExtensions,IEnumerable的1 uninstalledExtensions, IEnumerable
1个packComponentChanges)在Microsoft.VisualStudio.ExtensionManager.ExtensionManagerService.BeginInstall(IInstallableExtension installableExtension,布尔perMachine,AsyncOperation asyncOp)在Microsoft.VisualStudio.ExtensionManager.ExtensionManagerService.InstallWorker(IInstallableExtension延伸,布尔perMachine,AsyncOperation asyncOp)
随后弹出一个告诉我:
进程cannon访问该文件,因为它正由另一个进程使用.
当我首先尝试卸载扩展时(根据某些解决方案),我收到与上面相同的弹出消息,告诉我正在使用该进程!
我试图让这个工作的步骤:
对于步骤#3,我收到与尝试在Visual Studio 2012中更新时相同的一系列对话框/错误.
无论我尝试什么,我都无法获得最新版本!有没有人有另一招?
我也注意到NuGet现在显然不能正常工作."软件包管理器控制台"或"软件包管理器设置"都不做任何事情.
如何angular-resources.js
通过服务读取JSON文件?
我正在开发一个非常基本的Angular应用程序用于测试目的,我正在尝试从JSON文件中读取数据.我将此代码放在一个服务中,这样当我们移动基于服务器的数据存储时,我可以更轻松地将其替换掉.
我App
和App.controller
都声明如下:
'use strict';
// create module for custom directives
var App = angular.module('App', ['jsonService']);
// controller business logic
App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
console.log("marker 1");
if (!$scope.jsonData) {
console.log("marker 2");
JsonService.getData(function (d) {
console.log(d);
$scope.jsonData = d;
$scope.records = d.length;
});
} else {
console.log("I have data already... " + $scope.jsonData);
}
console.log($scope.jsonData);
});
Run Code Online (Sandbox Code Playgroud)
我JsonService
的定义如下:
'use strict';
angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource, $filter) {
// define the remote service using Angular's …
Run Code Online (Sandbox Code Playgroud) 我可以使用Python的CSV库或类似技术内联修改CSV文件吗?
当前我正在处理文件并更新第一列(名称字段)以更改格式.我的代码的简化版本如下所示:
with open('tmpEmployeeDatabase-out.csv', 'w') as csvOutput:
writer = csv.writer(csvOutput, delimiter=',', quotechar='"')
with open('tmpEmployeeDatabase.csv', 'r') as csvFile:
reader = csv.reader(csvFile, delimiter=',', quotechar='"')
for row in reader:
row[0] = row[0].title()
writer.writerow(row)
Run Code Online (Sandbox Code Playgroud)
哲学有效,但我很好奇我是否可以进行内联编辑,这样我就不会复制文件了.
我已尝试过以下操作,但这会将新记录追加到文件末尾而不是替换它们.
with open('tmpEmployeeDatabase.csv', 'r+') as csvFile:
reader = csv.reader(csvFile, delimiter=',', quotechar='"')
writer = csv.writer(csvFile, delimiter=',', quotechar='"')
for row in reader:
row[1] = row[1].title()
writer.writerow(row)
Run Code Online (Sandbox Code Playgroud) 当我尝试使用promise从AngularUI-Bootstrap获取一个typeahead值时,我收到以下错误.
TypeError: Cannot read property 'length' of undefined
at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at http://localhost:8000/static/js/angular.min.js:80:485
at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)
Run Code Online (Sandbox Code Playgroud)
我的HTML标记是:
<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">
Run Code Online (Sandbox Code Playgroud)
我的getTypeaheadValues
功能执行以下操作:
$scope.getTypeaheadValues = function($viewValue)
{
// return ['1','2','3','4'];
$http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).error(function ($data) {
console.log("failed to fetch typeahead data");
}).success(function ($data) {
var output = [];
$data.objects.forEach(function …
Run Code Online (Sandbox Code Playgroud) 尝试使用@JsonIdentityInfo jackson注释时出错.当我尝试反序列化对象时,我得到以下异常:
无法读取JSON:已经有了id(java.lang.Integer)的POJO [1](通过参考链:eu.cobiz.web.domain.Site ["operators"] - > eu.yavix.web.domain.Account ["image"] - > eu.cobiz.web.domain.Image ["@ Image"]);嵌套异常是com.fasterxml.jackson.databind.JsonMappingException:已经有id的POJO(java.lang.Integer)[ 1](通过参考链:eu.yavix.web.domain.Site ["operators"] - > eu.cobiz.web.domain.Account ["image"] - > eu.cobiz.web.domain.Image [" @图片"])
我试图反序列化的JSON看起来像:
{
"@Site": 1,
"siteId": 1,
"name": "0",
"address": {
"@Address": 2,
"addressId": 4,
"number": "22"
},
"operators": [
{
"accountId": 1,
"email": "user982701361@yavix.eu",
"image": {
"@Image": 1,
"imageId": 1,
"uri": "http://icons.iconarchive.com/icons/deleket/purple-monsters/128/Alien-awake-icon.png"
}
},
{
"accountId": 2,
"email": "user174967957@yavix.eu",
"image": {
"@Image": 2,
"imageId": 2,
"uri": "http://icons.iconarchive.com/icons/deleket/purple-monsters/128/Alien-awake-icon.png"
}
}
]
} …
Run Code Online (Sandbox Code Playgroud) 我有一个双向数据绑定,不会改变发送到指令的变量的值.
我的指令监视触发器并将关注点放在关联元素上(基于此处的代码):
app.directive('focusMe', function ($timeout) {
return {
scope: {
trigger: '=focusMe'
},
link: function (scope, element, attrs) {
scope.$watch('trigger', function(value) {
console.log("directive value: " + value);
console.log("directive start: " + scope.trigger);
if (value === true) {
$timeout(function () {
element[0].focus();
scope.trigger = false;
console.log("directive end: " + scope.trigger);
});
}
});
}
}
});
Run Code Online (Sandbox Code Playgroud)
在HTML中我称之为:
<input type="text" ng-model="item.value" focus-me="focusInput" />
Run Code Online (Sandbox Code Playgroud)
当我第一次触发它时,它可以工作 - 因为focusInput
变量会切换它的值.但是focusInput
在控制器范围内(指令外)不会切换回false
指令完成时.
这种切换false
应该在我打电话时发生scope.trigger = false
,假设我明白应该发生什么.
缺少什么会导致双向绑定不将值推回到传递给指令的变量?
更新01:
为了发布问题,我删除了一小段代码.HTML实际上看起来像这样: …
我有一个视图正在加载嵌入式文件后面text/ng-template
没有找到ng-include
.脚本块位于视图文件的最顶部:
<script type="text/ng-template" id="stringCondition">
<!-- template guts -->
</script>
Run Code Online (Sandbox Code Playgroud)
我将在以后的文件中加载:
<ng-include src="'stringCondition'"></ng-include>
Run Code Online (Sandbox Code Playgroud)
但是在控制台中产生404错误:
GET http://localhost/~me/stringCondition 404 (Not Found)
Run Code Online (Sandbox Code Playgroud)
我已经在命名上尝试了几种变体(比如最后有.html)并使用ng-include
作为属性而不是高级元素.一切都没有运气.
什么可能导致嵌入式ng-template
无法ng-include
在同一个视图文件中注册?
更新:
正如评论和答案所指出的那样,我的代码的基本设计是正确的.但是某些事情导致ng-template
(显然)无法使模板可用于系统.
我更新了我的代码以从HTML文件(而不是嵌入的模板)中提取,它工作正常.
是否有一种常见的情况,我可能会遇到这种休息ng-template
?
javascript angularjs angularjs-ng-include angularjs-templates angularjs-ng-template
javascript ×6
angularjs ×5
json ×2
angular-ui ×1
css ×1
css3 ×1
csv ×1
d3.js ×1
data-binding ×1
file-io ×1
flexbox ×1
html ×1
jackson ×1
nuget ×1
python ×1
rest ×1
spring-mvc ×1
svg ×1