Bom dia,
Estou desenvolvendo uma diretiva que é um popover que terá dentro dele um select e um botão. Por algum motivo que não consigo entender quando coloco ng-model e ng-click apontando para um atributo e function respectivamente do meu controller os mesmos não funcionam.
Poderiam me ajudar?
Código HTML - Template
<!-- Single button -->
<button id="btnCentralAssinante"
type="button"
class="btn btn-info btn-central-assinante btn-block popper"
data-container="body"
data-toggle="popover"
data-placement="bottom"
title="<b>Selecione a Cidade:</b>">
<i class="glyphicon glyphicon-user"></i> Central do Assinante
</button>
<div class="popper-content hide">
<div class="form-group col-md-12">
<select class="form-control" id="cbCidades"
ng-model="controller.cidade"
ng-options="opt as opt.cidade for opt in controller.cidades">
</select>
</div>
<button type='button'
class='btn btn-primary btn-central-assinante-acessar btn-block'
ng-click="controller.onConfirm()"><i class="glyphicon glyphicon-ok-sign"></i> Acessar</button>
</div>
Código da Diretiva
angular.module('nlDirectives', [])
.directive('centralAssinante', function() {
var directive = {
controller: ControllerCentralAssinante,
controllerAs: 'controller',
restrict: 'E',
templateUrl: 'app/directives/central-assinante/central-view.html'
};
return directive;
})
Controller da Diretiva
ControllerCentralAssinante.$inject = [
];
function ControllerCentralAssinante() {
var self = this;
self.cidades = [
{id: 1, cidade: 'Cidade 1'},
{id: 2, cidade: 'Cidade 2'}
];
self.cidade = self.cidades[0];
self.onConfirm = onConfirm;
function onConfirm() {
console.log('onConfirm');
}
}