Question

我正在研究用于测试项目的html和angular js来学习角度js。

我开发了一个用于屏蔽html（http://teena.aaadev.info/platform/controls/textbox.html）的自定义输入控件，它运行得很好。现在我想在另一个html页面中使用该控件，就像这样：

<div my-control="textbox"></div>

OR

<div my-control="textbox.html"></div>

一旦上述代码在Web浏览器中运行或查看，它将自动加载该div中的文本框控件，该div继承该控件的所有功能。这是我需要的基本功能。之后我计划传递控件的属性或选项以选择正确的控件格式。

我使用了以下代码，但它无效并显示空白页：

<div ng-include="'text.html'"></div>

我听说路由＆amp;多个视图（https://docs.angularjs.org/tutorial/step_07），这有助于实现我的要求吗？

谢谢！

Answer 1

您要做的是创建指令（可重复使用的html组件），而不是为您的页面创建控制器。指令本身是可移植的，并且是您的事件处理程序逻辑所在的位置。

我已经创建了一个jsbin精简版代码供您玩。你所需要的只是拥有＆＃34; my-textbox＆＃34;属性以便继承行为（它甚至不需要开启。

<input type="text" my-textbox ng-blur="blur($event)">

http://jsbin.com/hibufiwuxi/edit?html,js,output

Answer 2

如果您想使用单独的页面，那么一定要使用路由＆amp;多视图教程。

在Henry的jsbin示例中，您可以将指令定义为

textboxApp.directive('myTextbox', [function () { 
   return {
      restrict: 'A',
      scope: {mask: '@'},  // add other variables here
      controller: 'textboxController',
      templateUrl: 'textbox.html'
}]);

textbox.html看起来像这样

<h3>mask="{{mask}}"</h3>
<input id="{{mask}}" type="text"
       ng-focus="focusInNumber($event)" 
       ng-blur="focusOutNumber($event)" 
       ng-keypress="checkNumer($event)" />

此处还有directives更多内容 - 我在第一次学习时发现这非常有用。

然后，像index.html这样的文件将具有当前在textbox.html中的角度应用设置。

<div my-textbox mask="none"></div>
<div my-textbox mask="thousand"></div>
<div my-textbox mask="currency"></div>

访问角度js中的自定义控件

2 个答案: