想象一下 AngularJS 中的情况，您想要创建一个需要响应全局事件的指令。在这种情况下，假设是窗口调整大小事件。
最好的方法是什么？在我看来，我们有两个选择: 1. 让每个指令绑定(bind)到事件上，并对当前元素施展魔法 2. 创建一个全局事件监听器，它执行 DOM 选择器以获取应应用逻辑的每个元素。
选项 1 的优点是您已经可以访问要对其执行某些操作的元素。但是...选项 2 的优点是您不必在同一事件上多次绑定(bind)(针对每个指令)，这可能会提高性能。
让我们来说明这两个选项:
选项 1:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(el){
// In here we have our operations on the element
}
return {
link: function(scope, element){
// Bind to the window resize event for each directive instance.
angular.element(window).on('resize', function(){
doSomethingFancy(element);
});
}
};
});
选项 2:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(){
var elements = document.querySelectorAll('[my-directive]');
angular.forEach(elements, function(el){
// In here we have our operations on the element
});
}
return {
link: function(scope, element){
// Maybe we have to do something in here, maybe not.
}
};
// Bind to the window resize event only once.
angular.element(window).on('resize', doSomethingFancy);
});
这两种方法都运行良好，但我觉得选项二并不是真正的“Angular-ish”。
有什么想法吗？
最佳答案
我选择了另一种方法来有效地本地化全局事件，例如调整窗口大小。它通过另一个指令将 Javascript 事件转换为 Angular 作用域事件。
app.directive('resize', function($window) {
return {
link: function(scope) {
function onResize(e) {
// Namespacing events with name of directive + event to avoid collisions
scope.$broadcast('resize::resize');
}
function cleanUp() {
angular.element($window).off('resize', onResize);
}
angular.element($window).on('resize', onResize);
scope.$on('$destroy', cleanUp);
}
}
});
在基本情况下，可以在应用程序的根元素上使用
<body ng-app="myApp" resize>...
然后在其他指令中监听事件
<div my-directive>....
编码为:
app.directive('myDirective', function() {
return {
link: function(scope, element) {
scope.$on('resize::resize', function() {
doSomethingFancy(element);
});
});
}
});
与其他方法相比，这有很多好处:
对如何使用指令的确切形式不敏感。当 Angular 将以下内容视为等效时，您的选项 2 需要 my-directive:my:directive、data-my-directive、x -my-directive, my_directive 可以在guide for directives中看到
您只有一个地方可以准确影响 Javascript 事件如何转换为 Angular 事件，然后影响所有监听器。假设您稍后想要使用 Lodash debounce function 去抖动 javascript resize 事件.您可以将 resize 指令修改为:
angular.element($window).on('resize', $window._.debounce(function() {
scope.$broadcast('resize::resize');
},500));
因为它不一定会触发 $rootScope 上的事件，所以您可以通过移动放置 resize指令
<body ng-app="myApp">
<div>
<!-- No 'resize' events here -->
</div>
<div resize>
<!-- 'resize' events are $broadcast here -->
</div>
您可以使用选项扩展指令，并在应用的不同部分以不同方式使用它。假设您想要在不同部分使用不同的去抖动版本:
link: function(scope, element, attrs) {
var wait = 0;
attrs.$observe('resize', function(newWait) {
wait = $window.parseInt(newWait || 0);
});
angular.element($window).on('resize', $window._.debounce(function() {
scope.$broadcast('resize::resize');
}, wait));
}
用作:
<div resize>
<!-- Undebounced 'resize' Angular events here -->
</div>
<div resize="500">
<!-- 'resize' is debounced by 500 milliseconds -->
</div>
您稍后可以使用其他可能有用的事件来扩展该指令。也许像 resize::heightIncrease 这样的东西。 resize::heightDecrease，resize::widthIncrease，resize::widthDecrease。然后，您的应用程序中有一个地方负责内存和处理窗口的确切尺寸。
您可以将数据与事件一起传递。比如说您可能需要处理跨浏览器问题的视口(viewport)高度/宽度(取决于您需要多远的 IE 支持，以及您是否包含另一个库来帮助您)。
angular.element($window).on('resize', function() {
// From http://stackoverflow.com/a/11744120/1319998
var w = $window,
d = $document[0],
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
scope.$broadcast('resize::resize', {
innerWidth: x,
innerHeight: y
});
});
这让您可以在一个地方稍后添加数据。例如。假设您想发送自上次去抖事件以来的尺寸差异？您可能会添加一些代码来记住旧尺寸并发送差异。
本质上，这种设计提供了一种以可配置的方式将全局 Javascript 事件转换为本地 Angular 事件的方法，并且不仅适用于应用程序，还适用于应用程序的不同部分，具体取决于指令的位置。
关于javascript - Angular : What is the best way to bind to a global event in a directive，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23272169/
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有
我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click
🎉精彩专栏推荐💭文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业：【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码：【🔰Echarts大屏展示大数据平台可视化(150套)】🔖HTML+CSS+JS实例代码：【🗂️5000套HTML+CSS+JS实例代码(炫酷代码)继续更新中…】🎁免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程120G干货分享】🥇关于作者:💬历任研发工程师，技术组长，教学总监；
我有一个Rails应用程序。还有一个javascript(javascript1.js)文件必须包含在每个View的最底部。我把它放在/assets/javascripts文件夹中。Application.js包含以下代码//=requirejquery//=requirejquery_ujs//=someotherfiles//=require_directory.即使Application.js中不包含javascript1.js，它也会自动包含，不是吗？那么我怎样才能做我想做的事呢？ 最佳答案 单独定义、包含和执行您的java