はじめに

今回は、directiveに挑戦します。
directiveは、自分でタグや属性を定義できます。

メインビューの作成

directiveSample.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
    <script type="text/javascript" src="directiveSample.js"></script>
    <title>directiveSample</title>
</head>
<body ng-app="directiveApp">
    <div class="container">
        <div class="jumbotron">
            <h2>directiveSample!</h2>
        </div>
        <div ng-controller="directiveCtrl">
            <header></header>
            <mymessage></mymessage>
            <select ng-model="selecter" ng-options="year for year in years"></select>
            <div footer></div>
        </div>
    </div>
</body>
</html>

<header>グが自分で作成したタグになります。
<mymessage>も同様です。
<select>タグのng-options属性は、label for value in arrayの形式で設定します。directiveとは関係ありませんが、これを機に覚えましょう。
<div footer>は、<div>タグの追加した属性です。

Javascript

directiveSample.js

var directiveApp = angular.module('directiveApp', []);

directiveApp.directive('header', [function () {
        return {
            restrict: 'E',
            templateUrl: "directiveSampleHeader.html"
        };
}]);

directiveApp.directive('mymessage', [function () {
        return {
            restrict: 'E',
            template: '<div>&lt;mymessage&gt;タグの中身です。年を選択してください。</div>'
        };
}]);

directiveApp.controller('directiveCtrl', ['$scope', function ($scope) {
    $scope.years = [2010, 2011, 2012, 2013, 2014, 2015];
    $scope.selecter = 2014;
}]);

directiveApp.directive('footer', [function () {
        return {
            restrict: 'A',
            templateUrl: "directiveSampleFooter.html"
        };
}]);

directiveApp.directive()がdirectiveの設定になります。リターンで戻している値によって振る舞いが変わります。
directiveApp.controller()で行っているのが<select>タグのng-options属性の値になります。$scope.selecterでselected属性を付与しています。

置き換えビュー

directiveSampleHeader.html

<label>Header部分になります。</label>

directiveSampleFooter.html

<label>Footer部分になります。</label>

directiveについて

詳細な情報は、AngularJS - Creating Custom Directivesを読んでください。
今回使用したものについて説明します。

restrict: オプションによって振る舞いが変わります。
- A: 属性として置き換えます
- E: タグとして置き換えます
- C: classとして置き換えます
template: この文字列が代わりに表示されます。
templateUrl: URLのファイル内容が表示されます。

注意事項

Webサーバーを使用して、動作確認をして分には問題ないのですが、
ローカルファイルとして使用するとアクセス拒否となり、
以下のようなエラーが発生する場合があります。
Error: [$compile:tpload] http://errors.angularjs.org/1.3.1/$compile/tpload?p0=directiveSampleHeader.html

IE11では、必ず発生しました。

おわりに

置き換わりがなかなかできずに苦労しました。
原因のほとんどがIEの問題だったことは言うまでもありません。
やっぱり、Chromeとかのほうがいいとしみじみ感じました。

AngularJSに挑戦！入門 その４