### 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` 函數都不需要寫。