AngularJS directive with attributes

Vytvorenie nového grafického prvku a naplnenie údajmi z atribútov.

Do nového grafického prvku sú expandované premenné, ktoré sú ako atribúty na prvku.

script

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js></script>

directive-attribute.html

<style>
    .kontainer {
    background: #b6e356;
    border-radius: 8px;
    padding: 10px;
    }
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="kontainer">
    <hello-world name="Arduino Uno"></hello-world>
    <hello-world name="Arduino Due"></hello-world>
    </div>
</div>

directive-attribute.js

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

app.controller('myCtrl', ['$scope', function($scope) {
}]);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: function(elem, attr) {
        return '<div><h3>Hello '+attr.name+'!</h3></div>'
      }
  };
});

Aplikácie

Menu