Call a ng-click function within a directive

Question

Call a ng-click function within a directive

Navigation

#1 by (0 votes)

1

I have the following problem, I have created the following directive:

appController.directive('erCustomerror', function() {
    return {
        restrict: 'E',
        scope: {
            clickOn: '&',
            textoVariable: '=texto'
        },
        template: '<li><strong>{{textoVariable}}</strong></li>' +
            '<p class="error-server">' +
            '<strong>Upps!</strong><br>' +
            'Tuvimos un problema<br>Vuelve a intentarlo<br>' +
            '<a href="" ><img src="img/icon-actualizar.png" width="24" ng-click="clickOn()"></a>' +
            '</p>'
    };
})

and in the html it is declared in the following way:

 <div class="lista-col" ng-show="ocultarErrorPost">
        <er-Customerror texto="valorDirectivePost" clickOn="refreshPortlet()"></er-Customerror>
 </div>

and in the controller I have the following $scope.refreshPortlet that I want to execute when I click to update the image as it is in the example.

My controller goes like this

appController.controller('myCtrl',function($scope,$http){
   $scope.refreshPortlet = function(){
       console.log("Haz Algo");
   }
});

Please someone who can help me, because I think I suppose I'm doing well, or I do not know what I'm doing wrong. thanks in advance

angularjs angular-directivas

asked by jose.luis.lopez 03.09.2016 в 19:46

source

1 answer

Hide WebMethod in the browser How can I create sprite animations in a "grid-based" game in love2d?

score 0 · Accepted Answer

You are misusing the name-casing of the attributes.

If in your $scope isolado you have something like

scope: {
    clickOn: '&',
    textoVariable: '=texto'
}

This will result in the attributes click-on and texto-variable , you have clickOn and therefore it does not bin correctly.

The rule is simple, in the $scope you use camelCase or start with lowercase and divide the words using capital letters in the first letter and without leaving spaces.

Ex. esteEsMiEjemploDePropiedad

The DOM uses kebab-case , put everything in lowercase and divide the words by replacing the space with a hyphen .

Ex. este-es-mi-ejemplo-de-propiedad

Check the example working

var app = angular.module('app', []);

app.directive('erCustomerror', function() {
  return {
    restrict: 'E',
    scope: {
      clickOn: '&',
      textoVariable: '=texto'
    },
    template: '<li><strong>{{textoVariable}}</strong></li>' +
      '<p class="error-server">' +
      '<strong>Upps!</strong><br>' +
      'Tuvimos un problema<br>Vuelve a intentarlo<br>' +
      '<a href="" ><img src="img/icon-actualizar.png" width="24" ng-click="clickOn()"></a>' +
      '</p>'
  }
});
app.controller('myCtrl', function($scope, $http) {
  $scope.refreshPortlet = function() {
    console.log("Haz Algo");
  }
})

.error-server {
  position: relative;
  background-color: rgba(220, 61, 76, 1);
  color: white;
  padding: 10px;
  border-radius: 6px;
}
.error-server a {
  position: absolute;
  right: 10px;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div class="lista-col">
    <er-customerror texto="valorDirectivePost" click-on="refreshPortlet()"></er-customerror>
  </div>
</div>