指令绑定未定义

Directive binding undefined

本文关键字：未定义 绑定 指令      更新时间：2023-09-26

我对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 模板中使用 directiveInput 并且它使用正确的值和我的控制台实例化.log显示"未定义"？

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

通常，我为此编写的代码如下所示：

.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>
相关文章：