AngularJS Directive Bindings Examples

angularjs-directive-bindings-examples.md

NGJS Directive Bindings Examples

One Way Down

<one-way-down name="Daniel"></one-way-down>

...
  .directive('oneWayDown', function () {
    return {
      restrict: 'E',
      scope: {
        name: '@' // 
      },
      template: /*html*/`
    <div>Hello {{name}}</div>
  `,
      link: (scope, element, attrs) => {
      }
    }
  })
...

Two Way

<two-way name="{{name}}"></two-way>

...
  .controller('appController', ['$scope', function ($scope) {
    $scope.name = 'test';
  }])

  .directive('twoWay', function () {
    return {
      restrict: 'E',
      scope: {
        name: '@' // 
      },
      template: /*html*/`
    <div>Hello {{name}}</div>
  `,
      link: (scope, element, attrs) => {
      }
    }
  })
...

One Way Up

<one-way-up get-name="doSomething()"></one-way-up>

...
  .controller('appController', ['$scope', function ($scope) {
    $scope.doSomething = () => {
      console.log('doing something');
    }
  }])

  .directive('oneWayUp', function () {
    return {
      restrict: 'E',
      scope: {
        getName: '&'
      },
      template: /*html*/`
    <button ng-click="getName()">Get Name</button>`,
      link: (scope, element, attrs) => {
      }
    }
  })
...