1

タイトルのように、Angularを使用して（クリックではなく）ページの読み込み時にdivにクラスを設定しようとしています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 = "";
}]);

それで、それを行う方法はありますか？

4

1 に答える 1

3

あなたがやろうとしていることは、角度のある方法ではありません。のように:「コントローラーで 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/

于 2013-02-13T17:16:47.460 に答える