我知道这通常不是使用AngularJS的方法,但我想知道我想要实现的是否可以使用AngularJS.如果这不是推荐的方式,请提供有关如何实现这一目标的提示？请考虑我是网络编程领域的新手.
所以在我的项目中,我使用SVG和RaphaelJS在画布上绘制了几个小部件,这些小部件位于"holder"div中.我试图使用AngularJS将这些小部件绑定到数据,基本上每个小部件都链接到CustomController中的对象.初始化我的小部件时如何访问CustomController？
<html lang="en" style="height: 100%;" ng-app="myApp">
<head>
<script type="text/javascript"">
$(document).ready(function () {
var canvas = Raphael('holder', '800', '600');
var widget1 = new Widget1(params);
// initialize widgets here, that I need to bind to data using AngularJS
// I am not able to access the CustomController here when drawing my widgets
});
</script>
</head>
<body>
<div id="holder" ng-controller="CustomController">
</div>
</body>
</html>
无论如何使用AngularJS实现对SVG小部件的数据绑定？我开始认为这不是AngularJS的目的..在这种情况下你能告诉我如何做到这一点吗？
更新:
伙计们非常感谢您的回答!要求是小部件接受用户输入,并且我希望它不被放置在html文件中(出于模块化目的).因此该指令似乎是目前的主要选择.在链接方法中,我将使用RaphaelJS绘制窗口小部件,我也可以绘制可编辑对象,但这样我就不能正确使用AngularJS绑定机制,它只是手表和事件处理程序......这对我来说似乎很麻烦.如果某种方式我可以将SVG标签放在指令的模板属性中并且在模板中进行操作,那将是很好的,但似乎不支持.
你们对此有其他想法吗？
顺便说一下,有什么方法可以在属性和使用jQuery获得的HTML元素(例如文本框)之间以编程方式应用绑定？
问候
我正在尝试使用AngularJS实现数据绑定的通用表小部件(使用KendoUI).表格小部件在HTML文件中看起来像这样(在这里小提琴:http://jsfiddle.net/mihaichiritescu/ULN36/35/):
<div ng:controller="Tester">
<gridview>
<div data-ng-repeat="man in people">
<gridviewcolumn datasource="name" man="man"></gridviewcolumn>
<gridviewcolumn datasource="age" man="man"></gridviewcolumn>
</div>
</gridview>
</div>
基本上,表格将有一个ng-repeat,它将在对象列表中重复,对于每个对象,使用'gridviewcolumn',我会在每一行下添加单元格.这样,我试图复制KendoUI表的结构,这是这样的:
??<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>?????????????????????????????????????????????????????????????????????????????
因此,使用ng-repeat,对于每个对象,我将动态添加一个新行,对于每个列,我将在最后添加的行上添加一个新单元格.不幸的是,我无法以这样的方式操纵ng-repeat指令,我将正确地复制KendoUI网格视图的内部结构.我最终得到一个内部表结构,如下所示:
?<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name1</div>
<div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name2</div>
<div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody> …我正在尝试使用Jersey和Google Guice 3.0将2种不同的URL模式映射到同一个servlet,并将这些URL模式中的每一个应用于我项目中的不同包.
为了清楚起见,我正在粘贴下面的部分代码,我也会解释.
web.xml中
<listener>
<listener-class>com.abc.web.listeners.GuiceContextListener</listener-class>
</listener>
<filter>
<filter-name>guiceFilter</filter-name>
<filter-class>com.google.inject.servlet.GuiceFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>guiceFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
GuiceContextListener
public final class GuiceContextListener extends GuiceServletContextListener {
...
private JerseyServletModule getJerseyServletModule() {
JerseyServletModule jerseyModule = new JerseyServletModule() {
@Override
protected void configureServlets() {
filter("/*").through(WebServerStateFilter.class);
final Map<String, String> params = new HashMap<String, String>();
StringBuilder sb = new StringBuilder();
sb.append("com.abc.web.stats.services");
params.put(PackagesResourceConfig.PROPERTY_PACKAGES, sb.toString());
serve("/api/v1/*").with(GuiceContainer.class, params);
final Map<String, String> params1 = new HashMap<String, String>();
StringBuilder sb1 = new StringBuilder();
sb1.append("com.abc.web.stats.otherservices");
params1.put(PackagesResourceConfig.PROPERTY_PACKAGES, sb1.toString());
serve("/api/*").with(GuiceContainer.class, params1);
}
}
} …