如何在父$範圍，指令$範圍和模態$範圍之間進行連接？

Question

我正在嘗試爲標籤選擇器創建一個指令。

<label-selector label="label1">label1</label-selector> 

label1的是，應當選擇默認標籤，此值來源於$範圍在控制器對於其中標籤選擇器存在的圖。

我想要的行爲如下，當用戶點擊label1模式應該打開。這個模式列出了一組標籤，（該集合應該從某些數組中加載）。標籤1應該被標記爲選中，例如class =「selected」。

當我點擊另一個標籤說，label2，label2應該被選中，模態應該被關閉。該事件還將更新標籤選擇器。

<label-selector label="label2">label2</label-selector> 

我想封裝標籤選擇器元素和模態在同一個指令。

這可能嗎？

UPDATE

我在網上做了一個小例子。

HTML

<div ng-app="app" id="app"> 
    <div ng-controller="MainCtrl"> 
     <label-select color="{{color}}"></label-select> 
    </div> 
</div> 

CSS

.flyout { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 31101; 
    background-color: lightgray; 
    bottom: 0px; 
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2); 
    overflow-y: auto; 
    width: 500px; 
    -webkit-transform: translate(100%, 0%);  
    -webkit-transition: all 0.2s ease-in-out; 
} 
.flyout.show{ 
    -webkit-transform: translate(0%, 0%);  
} 

JS

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

app.controller('MainCtrl', function ($scope) { 
    $scope.color = "#cecece"; 
}); 

app.directive('labelSelect', function ($parse, $location) { 
    return { 
     restrict: 'E', 
     scope: { 
      color: '@color' 
     }, 
     template: 
     '<a ng-click="selectColor()" style="color: {{color}}" class="label-color icon-bookmark">{{color}}</a><div class="flyout"></div>', 
     link: function (scope, lElement, attrs) { 
      scope.selectColor = function() { 
       angular.element(".flyout").addClass("show"); 
      };    

     } 
    } 
}); 

http://jsfiddle.net/FrejNorling/bNumc/4/

我嘗試創建的行爲是我想要的彈出 div來填充標籤的列表（UL列表），當我在列表中選擇一個標籤在MainCtrl中的$scope.color應該更新和彈出應該消失/關閉。

Answer 1

就像我在評論中所說的，你可以在模態彈出窗口範圍內訪問父範圍內的變量。

HTML

<div ng-app="app" id="app"> 
    <div ng-controller="MainCtrl"> 
     <label-select color="{{color}}"></label-select> 
     <div class="flyout"> 
      <ul> 
       <li ng-click="setColor(color)" ng-repeat="color in colors">{{color}}</li> 
      </ul> 
     </div> 
    </div> 
</div> 

JS

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

app.controller('MainCtrl', function ($scope) { 
    $scope.color = "#AAADDD"; 
    $scope.colors = ["#AAA", "#BBB", "#CCC", "#DDD", "#EEE"]; 
    $scope.setColor = function (color) { 
     angular.element(".flyout").removeClass("show"); 
     $scope.color = color; 
    } 

}); 

app.directive('labelSelect', function ($parse, $location) { 
    return { 
     restrict: 'E', 
     scope: { 
      color: '@color' 
     }, 
     template: 
      '<a ng-click="selectColor()" ng-showstyle="color: {{color}}" class="label-color icon-bookmark">{{color}}</a>', 
     link: function (scope, lElement, attrs) { 
      scope.selectColor = function() { 
       angular.element(".flyout").addClass("show"); 
      }; 
     } 
    } 
}); 

JSFIDDLE DEMO