### 18.12. 示例：文本框 这个例子与官网上的那个例子相似。最终是要显示一个文本框，这个文本框由标题和内容两部分组成。而且标题和内容则是引用 controller 中的变量值。 HTML 部分的代码： <div ng-controller="TestCtrl"> <ys-block title="title" text="text"></ys-block> <p>标题: <input ng-model="title" /></p> <p>内容: <input ng-model="text" /></p> <ys-block title="title" text="text"></ys-block> </div> 从这个期望实现效果的 HTML 代码中，我们可以考虑设计指令的实现方式： - 这个指令的使用方式是“标签”， 即 _restrict_ 这个参数应该设置为 `E` 。 - 节点的属性值是对 controller 变量的引用，那么我们应该在指令的 _scope_ 中使用 `=` 的方式来指定成员值。 - 最终的效果显示需要进行 DOM 结构的重构，那直接使用 _template_ 就好了。 - 自定义的标签在最终效果中是多余的，所有 _replace_ 应该设置为 `true` 。 JS 部分的代码： var app = angular.module('Demo', [], angular.noop); app.directive('ysBlock', function(){ return {compile: angular.noop, template: '<div style="width: 200px; border: 1px solid black;"><h1 style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1><div>{{ text }}</div></div>', replace: true, scope: {title: '=title', text: '=text'}, restrict: 'E'}; }); app.controller('TestCtrl', function($scope){ $scope.title = '标题在这里'; $scope.text = '内容在这里'; }); angular.bootstrap(document, ['Demo']); 可以看到，这种简单的组件式指令，只需要作 DOM 结构的变换即可实现，连 `compile` 函数都不需要写。