Angular watch指令仅在刷新页面后加载

Question

我正在努力制作一个更多的指令。

当我刷新页面时，目前我的指示工作。我觉得我在这里错过了一个概念，我是否需要将指令初始化到控制器中？我的手表错了吗？目前控制器中没有任何与此问题相关的内容。

HTML：

<div data-ng-switch-when="false">
    <div data-ng-bind-html="::sanitizeWidgetContent(widget.content)"
         data-expand-height
         data-ng-class="{true: 'widget-text-collapsed'}[elementHeight>500]"
         class="widget-content">
    </div>

    <div class="fadeout-bottom" data-ng-show="elementHeight>500">
        <button class="btn btn-default btn-fadeout" data-ng-click="elementHeight=false">Read More</button>
    </div>
</div>

JS：

angular.module('myApp.directives')
    .directive('expandHeight', function () {
        return function (scope, el, attrs) {
            scope.$watch(attrs.expandHeight, function(){
                scope.elementHeight = el[0].offsetHeight;
            });
        }

    });