Question

我目前正在编写一小组AngularJS控件，我在这里遇到了一个问题。我正在创建的控件是一个按钮（让我们从简单开始）。

该指令如下所示：

officeButton.directive('officeButton', function() {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            isDefault: '@',
            isDisabled: '@',
            control: '=',
            label: '@'
        },
        template: '<div class="button-wrapper" data-ng-click="onClick()">' +
                    '<a href="#" class="button normal-button">' +
                      '<span>{{label}}</span>' +
                    '</a>' +
                  '</div>',
        controller: ['$scope', function($scope) {
            // Controller code removed for clarity.
        }],

        link: function(scope, element, attributes, controller) { 
            // Link code removed for clarity.
        }
    }
});

我删除了一些代码，因为它会让我的问题很难理解，我不相信这里需要它。

在我的指令的controller内，我正在编写一个API，并通过执行以下代码来完成：

controller: ['$scope', function($scope) {
    // Allows an API on the directive.
    $scope.api = $scope.control || {};

    $scope.api.changeLabel = function(label) 
        $scope.label = label;
    }
}]

所以，根据我的指示，我确实有一个孤立的范围，我可以传递control属性。通过此属性，我将可以访问方法changeLabel。

我的控件可以通过在HTML网站中使用以下指令来呈现：

<office-button control="buttonController"></office-button>

我的应用程序上的控制器将如下所示：

officeWebControlsApplication.controller('OfficeWebControlsController', ['$scope', function($scope) {
    $scope.buttonController = {};
}]);

我现在可以通过在changeLabel

中调用以下方法来执行我的scope方法

$scope.buttonController.changeLabel('Demo');

但是，这不起作用，因为此时changeLabel未定义。必须首先完全呈现该按钮。

有关如何解决此特定问题的任何想法吗？

编辑：添加了Plunker

我添加了plunker以提供更多信息。在changeLabel事件中调用onClick方法时，一切正常，但如果我在外面调用它，它就不再起作用了。这是因为$ scope.api.changeLabel在执行时没有定义（按钮尚未呈现）。所以我基本上必须在应用程序的控制器中等待按钮完全呈现。

亲切的问候

控制器必须等到指令加载

0 个答案: