指令和范围@

Question

我正在学习＆＃34;范围＆＃34; angularjs指令中的选项，并且无法弄清楚@ isnt工作的原因。你可以查看代码http://jsfiddle.net/gerlstar/Lzgts/。问题是第二个h4标签假设在app中显示＆＃34;我是一个指令。＆＃34;但它正在显示＆＃34; Hello world＆＃34;。任何帮助都会非常感谢。

<div ng-controller="MainCtrl">
<div ng-init="title = 'Hello World'">
     <h2 id="appTitle">{{title}}</h2>

    <button id="newAppTitle" ng-click="setAppTitle('App 2.0')">Upgrade me!</button>
    <div my-scoped-directive msd-title="I'm a directive, within the app {{title}}">
         <h4 id="directiveTitle">{{title}}</h4>

        <button id="newDirTitle" ng-click="setDirectiveTitle('bob')">Bob it!</button>
    </div>
</div>

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

app.controller('MainCtrl', function ($scope) {
    $scope.setAppTitle = function (title) {
        $scope.title = title;
    };
});


app.directive('myScopedDirective', function () {
    return {
        scope: {
            'title': '@msdTitle'
        },
        link: function ($scope, $element, $attrs) {
            $scope.setDirectiveTitle = function (title) {
                $scope.title = title;
            };
        }
    };
});