javascript - 指令绑定(bind)未定义

Question

我对 AngularJS 有点陌生。我正在编写指令，但我无法理解 bindToController 是如何运行的。我读了这篇有用的文章http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html但我不明白为什么在下面的例子中我没有定义。

.directive('firstDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        bindToController: {
            directiveInput:'='
        },
        templateUrl: 'components/directive-tree/directive-tree.html',
        controllerAs: 'directiveTreeCtrl',
        controller: function($scope, $uibModal){
            var self = this;
            self.selected = null;
            console.log(self.directiveInput); //HERE IS THE UNDEFINED
            $scope.modalOptions = {
                windowClass: 'semi-modal',
            }

            this.openDirectiveModal = function(object, index) {
                //Other irrelevant code
            }
        }
    } 
 });

之后，我可以毫无问题地使用 HTML 模板的输入。

<ul>
    <li ng-repeat="object in directiveTreeCtrl.directiveInput">
        {{object.Id}}&emsp;{{object.Name}}
    </li>
</ul>

为什么在 HTML 模板中我可以使用指令输入并且它使用正确的值进行实例化，而我的 console.log 显示“未定义”？

也许这是一个愚蠢的问题。谢谢

Answer 1

通常，我为实现此目的而编写的代码如下所示:

.directive('firstDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            directiveInput:'='
        },
        bindToController: true,
        templateUrl: 'components/directive-tree/directive-tree.html',
        controllerAs: 'directiveTreeCtrl',
        controller: function($scope, $uibModal){
            var self = this;
            self.selected = null;
            console.log(self.directiveInput); //HERE IS THE UNDEFINED
            $scope.modalOptions = {
                windowClass: 'semi-modal',
            }

            this.openDirectiveModal = function(object, index) {
                //Other irrelevant code
            }
        }
    } 
 });

现在是 HTML

<first-directive directive-input="inputObject"></first-directive>