[UI-Bootstrap] 小踩雷筆記 Tabset元件的scope操作

記錄一下使用Tabset取得控制child scope變數的筆記：
由於Tabset會建立child scope，
所以想要存在tab內部的scope變化除了用 $parent.scope變數 (如果又巢狀的scope可能會發生錯誤例外)，
也可以在parent controller宣告一致的變數，就能方便取值了。
以下這個Tabset的範例可以參考:
http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview


範例目的：
Justified這個tab裡面的input，一但值被改變，外面的parent scope會一起連動。

在tabset內綁定了一個parent scope宣告的model(model.selection)

<div ng-controller="TabsDemoCtrl">
  {{model.selection}}
  <tabset>
    <tab heading="Justified">
      <input ng-model="model.selection">
    </tab>
  </tabset>
</div>

宣告一個model的物件在parent scope，所以當tab裡面的input變動時，就容易取到變動的值了。

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.model = {selection: ''};
  $scope.options = ['a', 'b', 'c', 'd'];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};

https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular-ui/bootstrap/issues/1553