2

Angular の新機能。ページ間でナビゲーション ヘッダー バーを共有できるように、再利用可能なディレクティブを作成しようとしています。それぞれの個別の html ページは、現在のページまたはアクティブなページが何であるかを指定できる必要があるため、そのページを区別する css プロパティが適用されます。

このナビゲーション バーを使用する各 HTML ページが ActivePage の「プロパティ」を設定するだけで済むように、すべてのロジックをディレクティブにまとめる必要があります。

ただし、テンプレートで条件付き ng-class を取得して CSS クラスを適用できないようです。誰かが私の問題を見つけるのを手伝ってくれますか?

プランカーの例: http://plnkr.co/edit/JTI8wLOhN5xWeDdD9i2l

使用中で：

  <section ng-app="NavBarApp" ng-controller="NavBarCtrl">
    <nav-Bar ActivePage="{{Pages.Navigation.Page2}}"></nav-Bar>
  </section>

Javascript:

var Pages = {};
Pages.Navigation = {};

Pages.Navigation.Page1 = {
  Name: "Page 1",
  BaseLink: "Page1.html"
};
Pages.Navigation.Page2 = {
  Name: "Page 2",
  BaseLink: "Page2.html"
};
Pages.Navigation.Page3 = {
  Name: "Page 3",
  BaseLink: "Page3.html"
};

var NavBarApp = angular.module('NavBarApp', []);

NavBarApp.controller('NavBarCtrl', function NavBarCtrl($scope){
  $scope.Pages = {};
  $scope.Pages.Navigation = Pages.Navigation;
});

NavBarApp.directive('navBar', function(){
  return {
  restrict: 'E',
  replace: true,
  scope: {
    strActivePage: "@ActivePage"
  },
  controller: function($scope){
    $scope.aryPagesList = [];
    for(var strProp in Pages.Navigation){
      $scope.aryPagesList.push(Pages.Navigation[strProp]);
    }
  },
  templateUrl: 'NavBarTemplate.html'
  };
});

テンプレート：

<div id="NavBar" class="navigation">
    <ul>
        <li ng-repeat="oCurPage in aryPagesList">
            <a id="{{oCurPage.Name}}" ng-class="{active: oCurPage.Name==strActivePage}" href="{{oCurPage.BaseLink}}">{{oCurPage.Name}}</a>
        </li>
    </ul>
</div>

前もって感謝します！

4

1 に答える 1

4

Html/Angularjs では属性名に大文字を使用できないため、nav-bar html を次のように変更します。

<nav-bar active-page="{{Pages.Navigation.Page2.Name}}"></nav-bar>

次に、ディレクティブのスコープで、@ActivePage を @activePage に変更する必要があります。

NavBarApp.directive('navBar', function(){
  return {
  restrict: 'E',
  replace: true,
  scope: {
    strActivePage: "@activePage"
  },
  controller: function($scope){
    $scope.aryPagesList = [];
    for(var strProp in Pages.Navigation){
      $scope.aryPagesList.push(Pages.Navigation[strProp]);
    }
  },
  templateUrl: 'NavBarTemplate.html'
  };
});

plunkr が変更されました: http://plnkr.co/edit/6fMkmfxBd2I8nlfG8eLH

于 2013-05-01T19:40:22.100 に答える