AngularJSのdirectiveのScopeがよくわからないメモ

AngularJSのdirectivを使う場合、独自のscopeを作成できるが、その仕組みがいまいちわからない。

まず、簡単なところから。

属性のscopeをdirectivBのように{}を設定すると。
独自のscopeを作成する。

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <directiv-A></directiv-A>
  <directiv-B></directiv-B>
</body>
</html>
```

```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.value = '親のscopeを継承'
  }])
  .directive('directivA', function() {
    return {
      restrict: 'E',
      template: '<div>scope：{{value}}</div>'
    };
  })
  .directive('directivB', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<div>scope：{{value}}</div>'
    };
  })
```
```lang:出力結果
scope：親のscopeを継承
scope
```

<a href="http://codepen.io/satofaction/pen/EjdMoa" target="_blank">サンプル</a>

他にも下記設定方法がある。

* scope: false ・・・scope属性を設定しない場合と同様の結果。デフォルト値はfalse。
* scope: true  ・・・親scopeを継承し、新しいscopeを作成する。
* scope: {} 　・・・独立したスコープを作成する

scope: false/tureの設定サンプル

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <directiv-A></directiv-A>
  <directiv-A></directiv-A>
  <directiv-A></directiv-A>
  <directiv-B></directiv-B>
  <directiv-B></directiv-B>
  <directiv-B></directiv-B>
</body>
</html>
```
```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.value = '親のscopeを継承'
  }])
  .directive('directivA', function() {
    return {
      restrict: 'E',
      scope: false,
      template: '<div>scope: true：{{value}}  id:{{id}}</div>',
      controller: function($scope) {
        $scope.id = $scope.$id;
      }
    }
  })
  .directive('directivB', function() {
    return {
      restrict: 'E',
      scope: true,
      template: '<div>scope: true：{{value}}  id:{{id}}</div>',
      controller: function($scope) {
        $scope.id = $scope.$id;
      }
    };
  });
```
```lang:出力結果
scope: false：親のscopeを継承 id:2
scope: false：親のscopeを継承 id:2
scope: false：親のscopeを継承 id:2
scope: true：親のscopeを継承 id:3
scope: true：親のscopeを継承 id:4
scope: true：親のscopeを継承 id:5
```
<a href="http://codepen.io/satofaction/pen/bdmZQx?editors=101" target="blank">サンプル</a>

##独立したスコープを作成する

###scope:'='を使う

子Scopeと親Scopeを双方向バインディングさせる。
親Scopeが変更されれば、子Scopeも変更される。子が変更されれば、親も変更される。
親scopeで子scopeの管理がしやすくなる。

```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.test = '双方向でバインド'
    $scope.test2 = '双方向でバインド2'
  }])
  .directive('directivA', function() {
    return {
      restrict: 'E',
      template:'<div>directivA : {{itemA}}</div>',
      scope: {
        itemA: '='
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <div>{{test}}</div>
  <div>{{test2}}</div>
  <br>
  <directiv-A item-A="test"></directiv-A>
  <directiv-A item-A="test2"></directiv-A>
</body>
</html>
```

```lang:出力結果
双方向でバインド
双方向でバインド2

directivA : 双方向でバインド
directivA : 双方向でバインド2
```

<a href="http://codepen.io/satofaction/pen/aORMxZ?editors=101" target="_blank">サンプル</a>


###scope:'@'を使う

scopeのプロパティに指定した文字列がそのまま渡ります。
親scopeにはバインドされない。

```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {}])
  .directive('directivB', function() {
    return {
      restrict: 'E',
      template: '<div>directivB : {{itemB}}</div>',
      scope: {
        itemB: '@'
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <directiv-B item-B="文字列が入ります"></directiv-B>
</body>
</html>
```

```lang:出力結果
directivB : 文字列が入ります
```

<a href="http://codepen.io/satofaction/pen/WvYbMe?editors=101" target="_blank">サンプル</a>

###scope:'&'を使う

関数を指定する。（配列とか、数値とか、文字列とか指定できるみたいだが、関数を指定することが多いようです）

####例１
```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.func = function() {
      $scope.message = 'こんにちは';
    }
  }])
  .directive('directivC', function() {
    return {
      restrict: 'E',
      scope: {
        itemC: '&'
      },
      controller: function($scope) {
        $scope.itemC();
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  {{message}}
  <directiv-C item-C="func()"></directiv-C>
</body>
</html>
```

```lang:出力結果
こんにちは
```

<a href="http://codepen.io/satofaction/pen/QbJwBw?editors=101" target="_blank">サンプル</a>

####例２
```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.func = function(mess){
      console.log('こんにちは')
    }
  }])
  .directive('directivC', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="itemC()">ボタン</button>',
      scope: {
        itemC: '&'
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <directiv-C item-C="func(message)"></directiv-C>
</body>
</html>
```

```lang:出力結果
こんにちは
```

<a href="http://codepen.io/satofaction/pen/jPQExP?editors=101" target="_blank">サンプル</a>


####例３

引数を連携する。

```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.func = function(mes, mes2) {
      $scope.message = mes + mes2;
    }
  }])
  .directive('directivC', function() {
    return {
      restrict: 'E',
      scope: {
        itemC: '&'
      },
      controller: function($scope) {
        $scope.itemC({
          mes: 'こんにちは',
          mes2: '太郎さん'
        });
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  {{message}}
  <directiv-C item-C="func(mes,mes2)"></directiv-C>
</body>
</html>
```

```lang:出力結果
こんにちは太郎さん
```

<a href="http://codepen.io/satofaction/pen/VLVYEB?editors=101" target="_blank">サンプル</a>



####例4

&で配列を入れてみる。

```lang:js
angular.module('App', [])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.array = [1, 2, 3];
  }])
  .directive('directivC', function() {
    return {
      restrict: 'E',
      scope: {
        itemC: '&'
      },
      controller: function($scope) {
        console.log($scope.itemC())
      }
    };
  });
```

```lang:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <directiv-C item-C="array"></directiv-C>
</body>
</html>
```

```lang:出力結果
[1, 2, 3]
```

これは'='を使えばいいのではないかと思うが、子scopeにバインドしたくない場合などに使うのかな・・・

<a href="http://codepen.io/satofaction/pen/doQPQj?editors=101" target="_blank">サンプル</a>

まだ理解が浅い為、追記していく予定。