Estou tentando fazer com que a partir de um evento em uma Directive, seja chamado um método pertencente a um Controller, a chamada do método do Controller já está correta, só que parece que o $scope
, dentro desse método está errado, pois se seto o $scope.file.data
a partir da chamado do evento da Directive ele até seta o valor, mas não atualiza a View
, já se seto o $scope.file.data
a partir do evento do ng-click
na div
do Controller, tudo ocorre como o esperado.
O que estou tentando é o seguinte:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.file = {
data: "nada!"
};
$scope.setExternal = function(data) {
console.log(data);
$scope.file.data = data;
};
});
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
setOnClick: '&'
},
link: function(scope, element, attrs) {
element.on("click", function() {
scope.setOnClick({
param: "Clicou na directive!"
});
});
}
};
});
body {
margin: 0px;
}
.box {
padding: 25px 0px;
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
font: 20pt bold'Vollkorn';
color: #bbb;
margin: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
{{file.data}}
<div class="box" ng-click="setExternal('Clicou na div!')">
Está é uma Div do controller. Clique aqui!
</div>
<div class="box" my-directive set-on-click="setExternal(param)">
Está é a Directive. Clique aqui!
</div>
</div>
</div>
O que posso está deixando de fazer para que a chamada a partir da Directive:
element.on("click", function() {
scope.setOnClick({
param : "Clicou na directive!"
});
});
tenha um $scope
válido como o ng-click
da div
?
Obs: no meu caso real o evento na Directive não é um simples
click
, e sim um processo um pouco mais complexo. Utilizei um exemplo com click para fins didáticos e práticos.