Understanding the contextual usage of scope in angular directive

Question

I was just going through the documentation of Angular.js for ngTransclude, i came across the following example:

<script>
  angular.module('transcludeExample', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<ng-transclude></ng-transclude>' +
                  '</div>'
      };
  })
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.title = 'Lorem Ipsum';
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
  }]);
</script>
<div ng-controller="ExampleController">
  <input ng-model="title" aria-label="title"> <br/>
  <textarea ng-model="text" aria-label="text"></textarea> <br/>
  <pane title="{{title}}">{{text}}</pane>
</div>

I am not quite sure why these two properties are used in the directive:

transclude: true,
scope: { title:'@' },

I beleive doing transclude: true, gives the directive access to

$scope.title
$scope.text

which is in the controller , i am not sure about this though , but why is scope being used here ? i mean in such a weird fashion that too, I.E. ,

scope: { title:'@' },

What is the @ there for ? so to sum up my whole question, can somebody explain to me why the transclude and scope properties are used here in the directive ?

Thank you

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

The transclude property tells angular to replace the <ng-transclude> tag with the HTML code inside the directive. In your case, the {{text}} string.

The property:

scope: { title:'@' },

tells angular to include the attribute title passed to the directive in its scope.

Understanding the contextual usage of scope in angular directive

1 Answers1