选择的HTML页面:
<div class="form-group" style="margim-bottom:50px">
<select name="layoutDestino" class="form-control" ng-model="layoutDestino" ng-change="versaoDestino()" ng-controller="treeGridControllerCompare" ng-options="'Versão ' + layoutDestino.gua_lay_num_ver for layoutDestino in layouts_destino">
<option value="" disabled selected style="display: none;">Selecione uma versão para comparar</option>
</select>
</div>
指令:
.directive('dropdownMultiselect', ['$document', function($document) {
return {
restrict: 'E',
scope: {
model: '=',
options: '=',
pre_selected: '=preSelected'
},
link: function(scope, element, attr) {
scope.isVisible = false;
scope.$watch('options', function(newVal, oldVal) {
alert('Mudou');
});
console.log('Na diretiva: ' + scope.options);
scope.openDropdown = function() {
scope.isVisible = !scope.isVisible;
}
element.bind('click', function(event) {
event.stopPropagation();
});
$document.bind('click', function() {
scope.open = !open;
scope.isVisible = false;
scope.$apply();
});
},
template: "<div id='drop' style='width:100%' class='btn-group' data-ng-class='{open: open}'>" +
"<button class='btn btn-default' style='width:90%; text-align: left' >Tabelas</button>" +
"<button style='width:10%' class='btn btn-default dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>" +
"<ul class='dropdown-menu' id='drop-menu' ng-show='isVisible' aria-labelledby='dropdownMenu' style='width:90%'>" +
"<li><a data-ng-click='selectAll()'><i class='glyphicon glyphicon-ok'></i> Check All</a></li>" +
"<li><a data-ng-click='deselectAll();'><i class='glyphicon glyphicon-remove'></i> Uncheck All</a></li>" +
"<li class='divider'></li>" +
"<li ng-model='option' data-ng-repeat='option in options' style='width:85%'> <a data-ng-click='setSelectedItem()'>{{option.nomef}}<span data-ng-class='isChecked(option.nomef)'</span></a></li>" +
"</ul>" +
"</div>",
controller: function($scope) {
$scope.openDropdown = function() {
$scope.selected_items = [];
for (var i = 0; i < $scope.pre_selected.length; i++) {
$scope.selected_items.push($scope.pre_selected[i].nomef);
}
};
$scope.selectAll = function() {
$scope.model = _.pluck($scope.options, 'nomef');
console.log($scope.model);
};
$scope.deselectAll = function() {
$scope.model = [];
console.log($scope.model);
};
$scope.setSelectedItem = function() {
var nomef = this.option.nomef;
if (_.contains($scope.model, nomef)) {
$scope.model = _.without($scope.model, nomef);
} else {
$scope.model.push(nomef);
}
console.log($scope.model);
return false;
};
$scope.isChecked = function(nomef) {
if (_.contains($scope.model, nomef)) {
return 'glyphicon glyphicon-leaf pull-right';
}
return false;
};
}
}
}])
CONTROLLER - 当我调用$ http.get时,响应不会传递给指令。
$scope.versaoDestino = function(){
ParamService.versaocomparedestinoo = $scope.layoutDestino.gua_lay_num_ver;
console.log("Versão Destino :" + $scope.layoutDestino);
$http.get('rest/tabelas/'+ParamService.versaocomparedestinoo +'/'+$routeParams.gua_pro_id)
.success(function(tabelas){
$scope.tabelas = tabelas;
console.log('Tabelas' + tabelas);
}).error(function(){
$scope.mensagem = 'Erro ao obter Tabelas!';
});
};
DIRECTIVE HTML
<dropdown-multiselect style="margim:0px;" pre-selected="tabelas" model="tabela" options="tabelas"></dropdown-multiselect>