$ scope未在指令控制器中定义

Question

我有一个非常基本的演示应用程序。 HTML：

<div ng-app="MyApp" ng-controller="Shapes">
    <shapes></shapes>
</div>

和我的js文件：

app.directive('shape',
    function () {
        var directive = {};
        directive.restrict = 'E';
        directive.template = '<span>Shape Name: {{shape.Name}}, Shape Area: {{shape.Area}}</span>';
        directive.scope = {
            shape: "=name"
        };

        return directive;
    });

app.directive('shapes',
    function () {
        var controller = [
           '$scope', '$http', function ($scope, $http) {
                $scope.height = 0, $scope.width = 0;

               $http.get('/api/Values').then(function (respnse) {
                    $scope.shapes = respnse.data;
               });

               $scope.addShape = function () {
                   $http.post('api/Values', { Width: 1, Height: 1 }).then(function (res) { });
               };
           }
        ];

        var directive = {};
        directive.restrict = 'E';
        directive.template = '<div ng-repeat="shape in shapes"><shape name="shape"></shape></div>' +
            '<div>Height:<input type="text" ng-model="height"></input>, Width:<input type="text" ng-model="width"></input>' +
            '<button ng-click="addShape()">Add Shape</button></div>';
        directive.controller = controller;

        return directive;
    });

我的问题 - 在$ scope.addShape函数中，$ scope未定义。为什么？ $ http已定义且运行良好。