Javascript 如何连接父$scope、指令$scope和模式$scope？

我正在尝试为标签选择器创建一个指令

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

JS

---

我尝试创建的行为是，我希望弹出式div中填充标签列表，当我在列表中选择一个标签时，MainCtrl中的$scope.color应该被更新，弹出按钮应该被取消/关闭。

就像我在评论中说的那样，你可以从模式弹出窗口范围中的父范围访问变量

HTML

JS

---

你看过@了吗？看了一点，但据我所知angular.ui.bootstrap.modal使用普通HTML作为打开按钮，不从父$scope加载任何内容。它确实。。。本例没有将内容封装在指令中。我的问题可能不清楚，但我希望有一个单指令标签选择器，并使用它打开一个对话框/显示一个带有标签列表的div。好的，但从您发布的小代码来看，很难调试这个问题。也许你可以创建一个JSFIDLE，然后我们就可以从那里获取它。是的，我知道我提供的信息有点少。将创建一个JS小提琴。谢谢你的帮助。这是我第一次尝试JSFIDLE。更新问题以澄清。初稿，接近了吗@弗雷杰

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

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

.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%);    
}

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");
            };            

        }
    }
});

<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>

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");
            };
        }
    }
});