css - 使用 ng-class 的 AngularJS C 指令

Question

标题可能无法解释我想要达到的目标，所以我会在这里详细说明。我有一个仅限于 CSS 类名的指令(在本例中为 flex-wrap)。但是在我们实际拥有一些数据之前，此类不会应用于元素。

它的 HTML 看起来像这样:

<div class="row" ng-class="{ 'loading': !controller.loadingRecent, 'flex flex-vertical flex-wrap': controller.recent.length }">
    <div class="col-md-12 row-title">
        <h1>Recent orders</h1>
    </div>

    <div class="col-xs-12" ng-if="!controller.recent.length">
        <div alert type="danger">
            No records have been found that match your search.
        </div>
    </div>

    <div class="col-md-4 tile-lg" ng-repeat="order in controller.recent" tile>
        <a class="box-shadow" id="{{ order.orderNumber }}" ui-sref="viewOrder({ orderNumber: order.orderNumber })" coloured-tile>
            <div class="text">
                <p>
                    <strong>{{ order.account.accountNumber }}</strong><br />
                    {{ order.account.name }}<br />
                    {{ order.raisedBy }}<br />
                    {{ order.orderNumber }}<br />
                    {{ controller.getDescription(order) }}<br />
                </p>
            </div>
        </a>
    </div>

如您所见，直到我们的 recent.length 大于 0 时，才会应用 flex 类。我希望发生的情况是，当我们有记录时，将应用 CSS 类，因此与该类关联的 Angular Directive(指令)会触发。

相反，它目前不执行任何操作。有谁知道如何让我的指令生效？

这是我的指令，只是为了让你能看到它。

.directive('flexWrap', ['$window', '$timeout', function ($window, $timeout) {

    // Sets the height of the element
    var setHeight = function (element) {

        // Declare our variables
        var row = element.parent().parent(),
            height = 630;

        // If our row is a row
        if (row.hasClass('row')) {

            // Get the height of the rest of the items
            height = height - getHeight(row);
        }

        console.log('height = ' + height);

        // Set our elements height
        element.css('height', height + 'px');

        console.log('we are about to set the width');

        // After we set the height, set the width
        setWidth(element);
    }

    // Gets the height to minus off the total
    var getHeight = function (element) {

        // Declare our variables
        var height = 0,
            children = element.children(),
            loopChildren = element.hasClass('row');

        // Loop through the element children
        for (var i = 0; i < children.length; i++) {

            // Get the child
            var child = angular.element(children[i]);

            // If the child is not a column
            if (!child.hasClass('columns')) {

                // If we need to loop the children
                if (loopChildren) {

                    // Get the height of the children
                    height += getHeight(child);

                    // Otherwise
                } else {

                    // Add the height of the child to 
                    height += child[0].offsetHeight;
                }
            }
        }

        // Return our height
        return height;
    };

    // Sets the width of the element
    var setWidth = function (element) {

        // After a short period
        $timeout(function () {

            // Get our last child
            var children = element.children(),
                length = children.length,
                lastChild = children[length - 1];

            // Work out the width of the container
            var position = element[0].getBoundingClientRect(),
                childPosition = lastChild.getBoundingClientRect(),
                width = childPosition.left - position.left + childPosition.width;

            var style = $window.getComputedStyle(lastChild, null);
            console.log(style.getPropertyValue('width'));
            console.log('--------------------------------');
            console.log(lastChild);
            console.log(position);
            console.log(childPosition);
            console.log(width);
            console.log('--------------------------------');


            console.log('width = ' + width);

            // Apply the width to the element
            element.css('width', width + 'px');
        }, 500);
    };

    // Resize the container
    var resize = function (element, width) {

        // If our width > 992
        if (width > 992) {

            // Resize our element
            setHeight(element);

        // Otherwise
        } else {

            // Set our element width and height to auto
            element.css('height', 'auto');
            element.css('width', 'auto');
        }
    };

    return {
        restrict: 'C',
        link: function (scope, element) {

            // Get our window
            var window = angular.element($window),
                width = $window.innerWidth;

            // Bind to the resize function
            window.bind('resize', function () {

                // After half a second
                $timeout(function () {

                    // Get the window width
                    width = $window.innerWidth;

                    // Resize our element
                    resize(element, width);
                }, 500);
            });

            // Initial resize
            resize(element, width);
        }
    };
}]);

Answer 1

指令声明样式(例如 restrict: "C")和 ng-class 指令完全不相关。

ng-class 只是添加/删除 CSS 类 - 它不会触发可能与这些类关联的指令的编译/链接。换句话说，它不提供动态实例化指令的方法。

您的指令应该处理数据尚不可用的情况。有很多方法可以实现这一点，通过 $scope.$broadcast/$scope.$on 或通过服务，甚至通过 $watch - 取决于任何特定情况。