First directive at the angle

Asked

Viewed 148 times

1

I’m trying to make a simple directive on Angling for example.

This is a button that takes the class name and text as follows:

    var app = angular.module('app', [])
.controller('appController', ['$scope', function($scope) {
    $scope.alertar = function() {
        alert('alertando');
    }
}])

.directive('botao', function() {
  return {
    restrict: 'E',
    templateUrl: 'js/diretivas/botao.html',
    scope: {
        classe: '=',
        texto: '='
    }
  };
});

In boot.html, I have: 

<button class="{{ classe }}">{{ texto }}</button>

I call the directive in index.html as follows:

<botao classe="btn" texto="Teste"></botao>

What am I doing wrong? The button appears, but without the class and without the text.

angularjs

1 answer

1


To configure the variables have to be with @ linking an attribute to the property of Scope of the Directive, example:

var app = angular.module('app', [])
  .controller('appController', ['$scope', function($scope) {
    $scope.alertar = function() {
      alert('alertando');
    }    
  }])
  .directive('botao', function($parse) {
    return {
      restrict: 'E',
      template: '<button class="{{classe}}">{{texto}}</button>',
      scope: {
        classe: '@',
        texto: '@'
      }
    };
  });
.class1 
{
  color:blue;
  width:150px;
  height: 30px;
}
.class2 
{
  color:red;
  width:150px;
  height: 30px;
}
.class3 
{
  color:yellow;
  width:150px;
  height: 30px;
}
.class4 
{
  color:orange;
  width:150px;
  height: 30px;
}
.class5 
{
  color:#111;
  width:150px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appController">
  <botao classe="class1" texto="Botao Criado 1"></botao>
  <botao classe="class2" texto="Botao Criado 2"></botao>
  <botao classe="class3" texto="Botao Criado 3"></botao>
  <botao classe="class4" texto="Botao Criado 4"></botao>
  <botao classe="class5" texto="Botao Criado 5"></botao>
</div>

References

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.