指令不从Controller更新(选择ng-change)

时间:2016-03-01 20:47:49

标签: javascript jquery html directive

选择的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>

0 个答案:

没有答案