AngularJS 示例：文本框

這個(gè)例子與官網(wǎng)上的那個(gè)例子相似。最終是要顯示一個(gè)文本框，這個(gè)文本框由標(biāo)題和內(nèi)容兩部分組成。

而且標(biāo)題和內(nèi)容則是引用 controller 中的變量值。

HTML 部分的代碼：

<div ng-controller="TestCtrl">
  <ys-block title="title" text="text"></ys-block>
  <p>標(biāo)題: <input ng-model="title" /></p>
  <p>內(nèi)容: <input ng-model="text" /></p>
  <ys-block title="title" text="text"></ys-block>
</div>

從這個(gè)期望實(shí)現(xiàn)效果的 HTML 代碼中，我們可以考慮設(shè)計(jì)指令的實(shí)現(xiàn)方式：

• 這個(gè)指令的使用方式是“標(biāo)簽”， 即 restrict 這個(gè)參數(shù)應(yīng)該設(shè)置為 E 。
• 節(jié)點(diǎn)的屬性值是對(duì) controller 變量的引用，那么我們應(yīng)該在指令的 scope 中使用 = 的方式來(lái)指定成員值。
• 最終的效果顯示需要進(jìn)行 DOM 結(jié)構(gòu)的重構(gòu)，那直接使用 template 就好了。
• 自定義的標(biāo)簽在最終效果中是多余的，所有 replace 應(yīng)該設(shè)置為 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 = '標(biāo)題在這里';
  $scope.text = '內(nèi)容在這里';
});

angular.bootstrap(document, ['Demo']);

可以看到，這種簡(jiǎn)單的組件式指令，只需要作 DOM 結(jié)構(gòu)的變換即可實(shí)現(xiàn)，連 compile 函數(shù)都不需要寫。