More than 5 years have passed since last update.

AngularJSに挑戦！入門その４

Last updated at 2014-11-13Posted at 2014-11-04

#はじめに

今回は、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とかのほうがいいとしみじみ感じました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

AngularJSに挑戦！入門 その４

AngularJSに挑戦！入門その４