- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在用 Angular 构建一个类似咆哮的 UI。我想将其公开为工厂(或服务),以使其在我的 Controller 中可用。调用 Growl.add 将导致 DOM 发生变化,所以看起来我应该有一个指令来处理这个问题,而不是在工厂中直接进行 DOM 操作。假设工厂指令组合是最佳选择(如果这不是一个好的假设,请纠正我),问题是:
工厂和指令之间如何最好地沟通?
具体来说,如何最好地将消息从工厂发送到指令?其他问题很好地涵盖了通过一次性回调以另一种方式发送信息。
请参阅下面的工作示例。我怀疑有更好的方法..
作为引用,我尝试过其他选项:
A) 让指令监视服务,例如
$scope.$watch(function(){
growl.someFunctionThatGetsNewData()},
function(newValue){
//update scope
})
但这意味着 someFunctionThatGetsNewData 在每个摘要周期中都会被调用,这看起来很浪费,因为我们知道数据只会在 Growl.add 上更改
B) 通过 Routescope 或 dom/window 上的事件绑定(bind)发送“事件”。看起来没有棱 Angular
由于这两个选项看起来都不太好,所以我使用了下面的一个,但它仍然感觉很糟糕。 register
函数意味着指令和工厂紧密耦合。但话又说回来,从使用的 Angular 来看,它们是紧密结合在一起的——一个没有另一个就不好。
理想的解决方案似乎涉及声明一个工厂(或服务),该工厂(或服务)在其声明(可能还有功能范围)中包含该指令,以便它公开一个公共(public)接口(interface)。拥有两个完全相互依赖且在接口(interface)中紧密耦合的单独的公开声明的组件似乎很糟糕。
vpModule.directive('vpGrowl',['$timeout', 'growl', function ($timeout, growl) {
return {
template: '<div>[[msg]]</div.',
link: function($scope, elm, attrs) {
growl.register(function(){
$scope.msg = growl.msg;
});
$scope.msg = growl.msg;
}
};
}]);
vpModule.factory('growl', ['$rootScope', '$sce', function($rootScope, $sce) {
var growl = {};
growl.msg = '';
var updateCallback = function(){};
growl.add = function(msg){
growl.msg = msg;
updateCallback();
};
growl.register = function(callback){
updateCallback = callback;
};
return growl;
}]);
最佳答案
我会让你的咆哮服务决定显示什么,而不是指令。因此,该服务会处理任何计时器、状态等来决定何时隐藏/显示消息。然后,该服务公开该指令简单绑定(bind)到的消息集合。
该指令可以注入(inject)服务并将其简单地放置在范围内,然后将 ng-repeat 绑定(bind)到服务的集合。是的,这确实涉及到 watch ,但您真的不需要像这样担心单个 watch 的性能。
link: function(scope, elm, attrs) {
scope.growl = growl; // where 'growl' is the injected service
}
然后在指令模板中:
<div ng-repeat="msg in growl.messages">
...
</div>
关于javascript - 如何构建操纵 DOM 的 Angular 因子/服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25920694/
我是puppeteer的新手(通常对javascript不太了解),并且正在尝试编写一些基本功能来: 从XPath获取所有链接 循环浏览并单击那些链接 屏幕截图并保存页面的HTML 返回屏幕快照,然后
您好,我正在尝试创建一个我想通过网络发送到服务器的数据包,我几乎已经对数据包进行了排序,但是它缺少一个长度标识符,我需要在我的方法结束时计算它并添加放入数据包。 数据包结构是这样的 前导值标识符 (U
我正在尝试更改按钮的样式(实际上只是一个 div)。我可以在 CSS 中使用 .classname:active 来实现,但是按钮只会在被点击时改变样式;单击释放后,它不会保持样式更改。所以,我决定使
我有一个下拉导航栏(fiddle here 和下面的代码片段)。单击 SubItem 时,JS 函数会进行 Ajax 调用(未显示)。我想要实现的是在单击 SubItem 时隐藏 SubItems 列
给定一组平面图(Autocad、svg 或任何需要的格式...),我想以编程方式生成从 A 点到 B 点的方向。基本上我想说:“我如何获得从101房间到143房间?” (或三倍奖励积分,从 101 房
我在 Win32 下的 MS dev studio 中将一些代码从 C 转换为 C++。在旧代码中,我使用 QueryPerformanceCounter() 进行了一些高速计时,并对获得的 __in
我正在寻找一种方法来从 QTableWidget 单元格中挤出所有可能的空间。我粘贴了一些代码来演示我在下面尝试过的事情,并且我上传了在 OSX 10.8.5、Qt 4.8.4、PySide 1.2.
对于 PhoneGap 移动应用程序,我有以下场景: 应用程序打开并显示index.html 用户登录并被重定向到 home.html 然后用户可以转到 news.html 我想以一种方式处理 hom
可能是一个简单的问题: 尝试使用plotly生成散点图并自定义图例。 这是我的数据: require(plotly) set.seed(1) my.df % add_annotations(text=
在 Instagram/Facebook 上的帖子下方,您会看到类似“第 1 个人、第 2 个人和其他 10 个人喜欢此帖子”的文字。我想知道如何使用 Django 来实现网站的相同效果?通常,我会使
我必须使用 Form.Action 重定向到将从我的页面获取值的脚本。值得注意的是,这个脚本是外部的。 我的问题是,我还想要被点击并连接了 Action 的按钮,以便首先在后面的代码中完成一些功能。
我有一个问题。 我可以在 Express 中操纵路线吗?当我发出 get 或 post 申请地址时,我可以将 2 条路线传递到同一个 get 或 post 申请吗?像这样的东西。 module.exp
如果我在不同的 Canvas 上绘制我的图像,我可以使用 js 库应用一些效果,如淡入淡出、移动和其他效果吗?如果可能的话,在速度和性能方面可能会很有趣,而不是操纵“原始”?非常感谢 最佳答案 if
我希望你能帮助我。如何转换这个扁平的 JavaScript 数组,来自: [ {"state":"First State","district":"First District","local_
我有一个 React JSX 元素,我想遍历它的子元素,对其中的每个字符串元素执行替换(或任何其他操作),然后返回新的、修改后的 JSX 元素。例如: var element = Text { var
我正在制作一个 Java 网络项目,我想在其中使用一些 javascript 操作一些前端 SVG 元素。 我正在绘制一个相当简单的车库图,其中有一个来自 JSP 页面的棚屋元素。 我想要一个 jav
我读过许多帖子,其中人们询问有关对 XML 元素强制执行某些属性顺序的问题,一般的回答是这不合法/必需/不允许/相关/其他。 我不是在寻找任何说我不应该关心属性顺序的回复,所以如果这是你的观点,请不要
大家好,我的问题是,如何将两个 C 风格的字符串 append 到一个字符串中? 我对 C++ 的处理方式 (std::string) 很感兴趣,我从未接触过 C 风格的字符串,需要为我当前的开发项目
我选择了 HTML 页面上的所有节点,如下所示: var all = $('*'); 然后我遍历每个节点,检查每个节点是否有关联的文本值: var newDom = all.map((i, node)
示例取自 Mozilla's help page re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$
我是一名优秀的程序员,十分优秀!