我正在尝试为标签选择器创建一个指令。
<label-selector label="label1">label1</label-selector>
label1是应该选择的默认标签,该值来自控制器中存在标签选择器的视图的$scope。
我想要的行为如下,当用户单击标签1时,应该打开一个模态。这个模态列出了一个标签集合(该集合应该从某个数组somhere加载)。集合中的标签1应标记为已选择,例如class="selected"。
当我点击另一个标签,比如label2时,应该选择label2并且关闭模态。此事件还将更新标签选择器。
<label-selector label="label2">label2</label-selector>
我想将标签选择器元素和模态都封装在同一个指令中。
这可能吗?
更新
我在这里做了一个小例子。
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
应该更新,弹出按钮应该取消显示/关闭。
正如我在注释中所说,您可以从模态弹出窗口范围中的父范围访问变量。
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演示