我正在查看backbone.js截屏视频中的优秀peepcode演示代码.在其中,骨干代码全部包含在传递jQuery对象的匿名函数中:
(function($) {
// Backbone code in here
})(jQuery);
在我自己的骨干代码中,我只是将我的所有代码都包装在jQuery DOM'ready'事件中:
$(function(){
// Backbone code in here
});
第一种方法的优点是什么？这样做会创建一个匿名函数,然后立即执行jQuery对象作为函数参数传递,有效地确保$是jQuery对象.这是唯一的一点 - 保证jQuery绑定到'$'还是有其他理由这样做？
我知道在摘要周期中调用$digest或$apply手动会导致"$ digest已在进行中"错误,但我不知道为什么我在这里得到它.
这是一个包装服务的单元测试$http,服务很简单,只是防止对服务器进行重复调用,同时确保尝试执行调用的代码仍然获得预期的数据.
angular.module('services')
.factory('httpService', ['$http', function($http) {
var pendingCalls = {};
var createKey = function(url, data, method) {
return method + url + JSON.stringify(data);
};
var send = function(url, data, method) {
var key = createKey(url, data, method);
if (pendingCalls[key]) {
return pendingCalls[key];
}
var promise = $http({
method: method,
url: url,
data: data
});
pendingCalls[key] = promise;
promise.then(function() {
delete pendingCalls[key];
});
return promise;
};
return {
post: function(url, data) {
return …我正在使用来自http://angular-ui.github.com/bootstrap/的手风琴指令,我需要更多地控制手风琴何时打开和关闭.
更确切地说,我需要一个手风琴组内的按钮,它将关闭其母手风琴并打开下一个手风琴(所以基本上模仿如果close-others设置为true,点击下一个标题会做什么).我还需要做一些验证才能允许关闭手风琴并打开下一个,我还需要将其连接到手风琴标题上的单击事件.
我对angular非常新,我们目前正在将Backbone + JQuery的应用程序重写为Angular.在Backbone版本中,我们使用Twitter Bootstrap手风琴,我们使用JQuery打开和关闭它们.虽然我们仍然可以继续这样做,但我宁愿彻底摆脱JQuery DOM操作,所以我正在寻找一个纯粹的角度解决方案.
我在验证方面尝试做的是
<accordion-group ng-click="close($event)">
在我的控制器里
event.preventDefault();
event.stopPropagation();
这显然不起作用,因为DOM元素被指令替换,并且从不添加点击处理程序.我一直在浏览源代码(并找到了一些非常好的无记录功能),但我甚至不知道在哪里开始解决这个特定的挑战.我正在考虑分配angular-ui并尝试将此功能添加到accordion指令中,但如果我能够在不修改指令的情况下实现这一点,那将会更好.
我试图弄清楚是否有可能$http在它发生之前使用拦截器来取消请求.
有一个按钮可以触发请求,但如果用户双击它,我不希望同一个请求被触发两次.
现在,我意识到有几种方法可以解决这个问题,我们已经有了一个可行的解决方案,我们将$http服务包装在一个服务中,该服务跟踪当前待处理的请求,并使用相同的方法,URL和数据忽略新请求.
基本上这是我试图用拦截器做的行为:
factory('httpService', ['$http', function($http) {
var pendingCalls = {};
var createKey = function(url, data, method) {
return method + url + JSON.stringify(data);
};
var send = function(url, data, method) {
var key = createKey(url, data, method);
if (pendingCalls[key]) {
return pendingCalls[key];
}
var promise = $http({
method: method,
url: url,
data: data
});
pendingCalls[key] = promise;
promise.finally(function() {
delete pendingCalls[key];
});
return promise;
};
return {
post: function(url, data) {
return send(url, data, …有没有人对在角度应用程序中实现scrollspy的最佳方法有任何想法？我开始使用Twitter Bootstrap的实现,但我很难找到一个初始化(更重要的是在DOM更改后刷新)插件的好地方.
基本上我的控制器在加载数据时会对数据执行异步请求,并且在请求返回之前无法完全呈现DOM.然后,当完全呈现DOM时,需要刷新scrollspy插件.现在,一旦收到所需的数据,我的控制器就会在其范围内广播一个事件,并且我有一个指令来接收此事件.我不喜欢这个解决方案有两个原因
它只是觉得hacky.
当我在收到此事件后刷新scrollspy插件时,由于DOM未在周期的后期更新,因此它还为时尚早.我尝试了evalAsync,但最后我不得不使用超时,只希望DOM渲染得足够快.
我查看了Bootstrap插件的源代码,从头开始实现这一点似乎相当简单.我遇到的问题是,当我试图为它做一个指令时,我似乎无法从链接函数中收到的元素订阅滚动事件.
有没有人找到这样的好方法,或者有人有任何建议吗？我与使用Bootstrap实现没有任何关系,因为现在我在Bootstrap上唯一的dep是我刚刚添加的scrollspy-plugin.
我使用的是Angular v1.0.8
我有一个选择,我正在使用ng-options指令用我在Controller中声明的数据数组填充它.
HTML片段
<body ng-controller="SelectCtrl">
<select
ng-model="selected"
ng-options="o as o.caption for o in options" />
</body>
代码段
angular.module('app', [])
.controller('SelectCtrl', ['$scope', function($scope) {
$scope.options = [
{ key: 1, caption: '1' },
{ key: 2, caption: '2' },
{ key: 3, caption: '3' },
{ key: 4, caption: '4' },
{ key: 5, caption: '5' }
];
}]);
在Chrome中,如果您选择让我们说选项3然后按预期选择它.
在IE10,不过,如果您选择选项3,然后选项1被选中.
(http://plnkr.co/edit/T9bbEW?p=preview)
仅当控制器中没有设置默认选择时,才会发生这种情况.在删除"空白"选项后执行的后续选择将被正确设置.
我怀疑它可能是这个问题的重复,但我不完全确定.我并没有真正动态地改变这里的选项,虽然我想也许Angular是因为在两个浏览器中都删除了"空白"选项.
但我想要这个功能.我不想为此选择提供默认值,因为用户需要为我做出主动选择.
有没有人知道解决方法和/或解决方案？最好不要使用JQuery搞乱选项...
TL; DR:在这个plunker上,为什么第二个指令不会渲染包含的模板？
这个例子是简化的,但实际上我有一个用例来做我想要尝试的事情是有道理的.
我有一个使用ng-include的Angular指令,使用ng-include和ng-transclude将提供的模板包装到其他HTML中.它本身很好用.
.directive('content', [function() {
return {
restrict: 'E',
transclude: true,
replace: true,
controller: 'contentCtrl',
template: '' +
'<div class="foo">' +
' <div ng-transclude></div>' +
'</div>',
scope: {
}
};
}])
.directive('contentInner', [function() {
return {
restrict: 'E',
require: '^content',
transclude: true,
replace: true,
scope: {
},
template: '' +
'<div class="body">' +
' <div class="close" ng-click="close()">' +
' <i class="icon-remove-sign"></i>' +
' <span>Close</span>' +
' </div>' +
' <div ng-transclude ></div>' +
'</div>',
link: function(scope, …我想添加一个npm脚本,它将在svn提交发生之前运行我的linting和测试.
如果linting或者测试失败,我希望提交停止,就像使用git commit hook一样.
有谁知道包裹？我一直在寻找没有真正的运气.
当我访问我的 url 时，我的脚本将获取当前 URL 并将其存储在变量中
var currentURL = (document.URL);
我想获取 url 中正斜杠后面的所有内容，因为正斜杠后面会有一个哈希 ID，如下所示：
www.mysite.com/XdAs2
所以这就是存储在我的变量 currentURL 中的内容，我只想XdAs2从中取出并将其存储到另一个变量中。此外，我还想了解另外两件事。
document.URL 是获取当前 URL 的最佳方式吗？或者我在使用某些浏览器时会遇到问题吗？
如果我尝试使用 iframe 打开该 URL，document.URL 仍然有效吗？或者必须有一个包含 url 的地址栏？我真的很感谢这三个问题的答案。谢谢
我正在制作一个条形图作为SVG,并且非常希望我的条形图被动画化并从y轴上的"0"向上增长到它们的相应值.
令我挣扎的是,坐标(0,0)位于左上角而不是左下角.在我的"非动画"解决方案中,我给了条形码"y"的不同值取决于它们应该有多高,如下所示:
<svg id="graph"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
<stop style="stop-color:#0000FF" offset="0"></stop>
<stop style="stop-color:#FFFFFF" offset="1"></stop>
</linearGradient>
<rect width="50" height="14" x="0" y="8" fill="url(#gradient)"></rect>
<rect width="50" height="22" x="55" y="0" fill="url(#gradient)"></rect>
<rect width="50" height="15" x="110" y="7" fill="url(#gradient)"></rect>
<rect width="50" height="9" x="165" y="13" fill="url(#gradient)"></rect>
</svg>
这看起来像条形图,因为(y +高度)对于所有矩形都是相同的,但它在概念上从y轴的不同点开始"从上到下"绘制并向下生长到y的相同值.
现在当我想要动画时,我显然希望它们"向上"增长,这就是我被困住的地方.
<rect width="50" height="14" x="0" y="8" fill="url(#gradient)">
<animate attributeName="height" from="0" to="14" dur="2s" id="animation"></animate>
</rect>
这将使矩形从y = 8变为"向下"到y = 22并且在网格中,其中(0,0)在左上方,这是完全有意义的.但是,我真的想要做相反的事情,因为看起来"height"属性的负值被视为0(或者我可以将高度从-14设置为0)我不确定我将如何做到这一点.
我试过谷歌搜索但没有太多运气.我也非常喜欢这样做而不使用图表库.
angularjs ×6
javascript ×3
jquery ×2
angular-ui ×1
backbone.js ×1
html ×1
jasmine ×1
jasmine2.0 ×1
node.js ×1
npm ×1
select ×1
svg ×1
svn ×1