3

I have this code, written with Angular 1.2: http://jsfiddle.net/VmkQy/1/

<div ng-app="app">
    Title is: <span my-directive data-title="Test title">{{ title }}</span>
</div>

angular.module('app', [])
    .directive('myDirective', [function() {
        return {
            restrict: 'A',
            scope: {title:'@'},
            link: function($scope) {
                alert($scope.title);   
            }
        }
    }])
;

Scope has a title property, but it does not rendered. Why?

If I change directive config to scope:true, it will works fine: http://jsfiddle.net/VmkQy/2/

angular.module('app', [])
    .directive('myDirective', [function() {
        return {
            restrict: 'A',
            scope: true,
            link: function($scope, $element, attrs) {
                $scope.title = attrs.title;
                alert($scope.title);   
            }
        }
    }])
;

This is a bug or feature in Angular 1.2? Older version works fine in all this cases: http://jsfiddle.net/VmkQy/3/

Akuma
  • 561
  • 1
  • 4
  • 16

1 Answers1

2

The {{title}} inside of your <span /> gets replaced. Add template: "{{title}}" to your directive and it works:

http://jsfiddle.net/VmkQy/5/

Horen
  • 11,184
  • 11
  • 71
  • 113
  • Thanks! But why is this happening? – Akuma Apr 11 '14 at 05:03
  • 1
    I think it's a scope problem. Meaning the `title` is not available in the isolated scope: http://stackoverflow.com/a/17900556/1503476. That explains why it works with `scope: true` as well – Horen Apr 12 '14 at 06:51
  • 1
    I asked a question myself to understand the whole scope / transclusion thing better. It might help you, too: http://stackoverflow.com/q/23027254/1503476 – Horen Apr 12 '14 at 11:47