First non-angular directive

Question

First non-angular directive

Navigation

#1 by (1 votes)

1

I'm trying to make a simple directive in angularJS for example.

This is a button that receives 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: '='
    }
  };
});

Inside botao.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

asked by anonymous 30.08.2017 / 01:30

1 answer

To have a bank in phpMyAdmin do you need the bank in Mysql? [duplicate] Insert_batch or update_batch - CodeIgniter

score 1 · Accepted Answer

To set up variables, you have to @ linking an attribute to the 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><scriptsrc="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>