在 Angular js 中访问自定义控件

Question

我正在为测试项目开发 html 和 angular js，以学习 angular js。

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

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

或

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

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

我使用了以下代码，但它不起作用并显示空白页：

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

我听说过 Routing & Multiple Views (https://docs.angularjs.org/tutorial/step_07)，这对实现我的要求有帮助吗？？

谢谢！

Answer 1

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

在 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 中的 Angular 应用程序设置。

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

Answer 2

您要做的是创建指令（可重复使用的 html 组件），而不是为您的页面创建控制器。指令本身是可移植的，这就是您的事件处理程序逻辑应该在的地方。

我为您的代码创建了一个 jsbin 精简版供您使用。您所需要的只是具有“my-textbox”属性以继承行为（它甚至不需要打开。

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

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