Angular: transclude example 1.3

by nicolasmoise

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-controller="myController">
  <h1>parent ctrl: {{title}}</h1>
  <my-widget title="title"></my-widget>
</div>

JavaScript

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

        myApp.controller("myController", function($scope) {
          $scope.title = 'parent title';
        });

        myApp.directive("myWidget", function() {
          return {
            restrict: "E",
            replace: true,
            scope: {
              title: '='
            },
            bindToController: true,
            controllerAs: 'ctrl',
            require: ['myWidget'],
            link: function(scope, element, attrs, ctrls) {
              ctrls[0].linktitle = scope.title;
            },
            controller: function() {

            },
            template: "<div>passed through scope: {{ctrl.title}} passed through scope and link: {{ctrl.linktitle}}</div>"
          };
        })