1

説明 ：

header directiveangularアプリケーション用に作成しました。このディレクティブを使用することで、いくつかの条件に基づいて属性のプロパティをtemplate使用してロードしています。templateUrl

html :

<div header></div>

ディレクティブ:

app.directive('header', ['LS', function(LS) {
'use strict';

var user = LS.getData() === 'true' ? true : false;
return {
    restrict: 'A',
    replace: true,
    templateUrl: user ? 'withlogin-header.html' : 'withoutlogin-header.html',
    controller: ['$scope', 'LS', function ($scope,LS) {
      $scope.login = function() {  
      return LS.setData(true);
      }
      $scope.logout = function() {
      return LS.setData(false);
      }
    }]
  }
}]);

withlogin-header.html :

<div>
    User  is logged in !!!
    <input type="button" ng-click="logout()" value="Logout"/>
</div>

withoutlogin-header.html :

<div>
    Hey buddy, log in !!!
    <input type="button" ng-click="login()" value="Login"/>
  </div>

要件 ：

.iedifferent headersに基づいて表示する必要があります。ユーザーがログインしていない場合は通常のヘッダーを表示し、ユーザーが既にログインしている場合は別のヘッダーを表示する必要があります。user roleslogin buttonlogout button

私たちが直面している課題:

headerディレクティブが正しく機能していません。クリックすると、ディレクティブのプロパティで定義された条件に基づいてlogin button別withoutlogin-header.htmlのテンプレートが読み込まれません。withlogin-header.htmltemplateUrl

私はこれまでに試しました：

Plnkr : http://plnkr.co/edit/w7AyUjSNA1o5NJp6tD1p?p=preview

即時のヘルプは非常に高く評価されます。ありがとう

4

3 に答える 3

0

テンプレートを 1 つのディレクティブに入れることができます。

html:

<div ng-if="!isLoggedIn">
    Hey buddy, log in !!!
    <input type="button" ng-click="login()" value="Login"/>
</div>
<div ng-if="isLoggedIn">
    Hey buddy, log in !!!
    <input type="button" ng-click="login()" value="Login"/>
</div>

指令：

app.directive('header', function() {
  'use strict';
  return {
    restrict: 'A',
    replace: true,
    templateUrl: 'withlogin-header.html',
    controller: ['$scope', 'LS', function ($scope,LS) {
      $scope.isLoggedIn = false;
      $scope.login = function() {  
        LS.setData(true);
        $scope.isLoggedIn = LS.getData() === 'true';
      }
      $scope.logout = function() {
        LS.setData(false);
        $scope.isLoggedIn = LS.getData() === 'true';
      }
    }]
  }
});

編集:ng-includeまたは、別のテンプレート ファイルに固執する場合は、@Stepan Kasyanenko が言及したように使用できます。

于 2016-04-21T12:44:38.437 に答える