Question

在标题中，我正在尝试使用角度ng-class在页面加载（而不是点击）上设置一个类，但我不知道如何或是否可能。 div包含在模块和控制器中，我之前尝试使用$scope.frontpage设置变量，但它不起作用。

<div id="main" role="main" class="clearfix" data-ng-module="ValidationBoxModule" ng-controller="ValidationBoxClassController">
    <div validation-id="dataValidationSummary" validation-summary ng-class="frontpage" ></div>
    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
</div>

angular.module("ValidationBoxModule", []).controller("ValidationBoxClassController", ["$scope", function ($scope) {

    $scope.frontpage = "";

    ($("#main").find(".sliderBox")) ? $scope.frontpage = "frontpage" : $scope.frontpage = "";
}]);

那么有办法吗？

Answer 1

你要做的不是角度方式。如：“不要在控制器中进行DOM操作”。而是使用指令，例如：

function Ctrl($scope) {
  $scope.frontpage = false;
}

angular.module('app', ['app.directives']);

angular.module('app.directives', []).directive('isFrontpage', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      scope.frontpage = angular.element(element).find('#main .sliderBox').length > 0;
    }
  };
});

使用：

<body ng-controller="Ctrl" is-frontpage>
  <div id="main">
    <div class="sliderBox"></div>
  </div>

  <div
    validation-id="dataValidationSummary"
    validation-summary
    ng-class="{frontpage: frontpage}">
  </div>
</body>

演示：http://jsbin.com/unihon/4/

在页面加载时使用ng-class在div上设置一个类

1 个答案: