0

ラベル セレクターのディレクティブを作成しようとしています。

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

label1 は、選択する必要があるデフォルトのラベルです。この値は、ラベル セレクターが存在するビューのコントローラーの $scope から取得されます。

私が望む動作は次のとおりです。ユーザーが label1 をクリックすると、モーダルが開きます。このモーダルは、ラベルのコレクションを一覧表示します (コレクションはどこかの配列からロードする必要があります)。コレクション内の label1 は、class="selected"などのように、選択済みとしてマークする必要があります。

label2 などの別のラベルをクリックすると、label2が選択され、モーダルが閉じられるはずです。このイベントは label-selector も更新します。

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

label-selector 要素と modal の両方を同じディレクティブにカプセル化したいと思います。

これは可能ですか？

アップデート

ここで小さな例を示しました。

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 リスト) を入力することです。リスト内のラベルを 1 つ選択すると$scope.color、MainCtrl 内のラベルが更新され、フライアウトが消える/閉じる必要があります。

4

1 に答える 1

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

于 2013-07-31T18:24:04.783 に答える