javascript - 使用 typescript 嵌套 Angular Directive(指令)

Question

是否可以使用带有嵌套 Angular Directive(指令)的 Typescript？

http://jsfiddle.net/mrajcok/StXFK/

<div ng-controller="MyCtrl">
  <div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>
</div>

下面的 Javascript 看起来像 typescript 代码怎么样？

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

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        require: '^screen',
        controller: function($scope) {
            this.componentFunction = function() {
                $scope.screenCtrl.doSomethingScreeny();
            }
        },
        link: function(scope, element, attrs, screenCtrl) {
            scope.screenCtrl = screenCtrl
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})


//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

Answer 1

该代码应该按原样工作。然而，作为更好的实践，如果 TypeScript 类变得太大，您可以使用 Controller http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1