1

解释 ：

header directive我为我的角度应用程序创建了一个。通过使用此指令，我们将根据某些条件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>

没有登录-header.html：

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

要求 ：

我们必须different headers基于user roles.ie 显示，如果用户没有登录，那么我们必须显示正常的标题，login button如果用户已经登录，那么我们必须显示不同的标题logout button。

我们面临的挑战：

header指令无法正常工作。当我们单击它时login button，它不会根据指令属性中定义的条件withoutlogin-header.html加载另一个模板。withlogin-header.htmltemplateUrl

到目前为止我尝试过：

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

任何直接的帮助都将是非常可观的。谢谢

4

3 回答 3

1

结帐这个 plunker 我已经创建了一个惊人directive的从服务器获取dynamic header模板。

我也对你的代码做了一些小改动。希望它一定会帮助你...

http://plnkr.co/edit/GWIozm?p=preview

于 2016-04-21T14:30:55.100 回答
0

我有类似的情况，即我为匿名用户显示特定的 URL 列表，并在用户登录后显示不同的列表。我通过在用户的登录属性以及用户选择的语言上添加 $watch 来接近此解决方案登录时（为多个国家/地区编码）

$scope.$watch(function () {
    return User.language;
}, function (newVal, oldVal) {
    if (newVal === undefined) {
        newVal = "english";
    }
    navBarCtrl.AnonymousUrls = [];
    navBarCtrl.AuthenticatedUrls = [];
    $http.get('http://localhost:#####/Urls/' + newVal)
        .success(function (data) {                
            navBarCtrl.sortAllUrlLists(data, navBarCtrl.AnonymousUrls, navBarCtrl.AuthenticatedUrls);
    });//end of http get
}, true);

$scope.$watch(function () {
    return User.isAuthenticated;
}, function (newVal, oldVal) {
    navBarCtrl.isUserAuthenticated = newVal;
}, true);

这两个属性是在用户使用以下方式登录时设置的

this.submit = function () {
    var data = angular.toJson(submitForm.credentials);
    $http.post("/submitLogin", data)
        .success(function (data, status, headers, config) {
            submitForm.user.isAuthenticated = true;
            submitForm.user.username = data.username;
            submitForm.user.location = data.location;
            submitForm.user.dsn = data.dsn;
            submitForm.user.language = data.language;
            $location.path(User.intededPath);                        
        })
        .error(function (data, status, headers, config) {
            submitForm.user.isAuthenticated = false;
            alert("fail");
        }); // end of $http.post
} // end of submit

最后在视图中我有以下根据用户是否登录显示正确的列表

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li ng-class="{'dropdown':urlList.length>1}" ng-show="!navBarCtrl.isUserAuthenticated" ng-repeat="urlList in navBarCtrl.AnonymousUrls">
             <a href="" data-toggle="dropdown" class="dropdown-toggle" ng-if="urlList.length>1">{{urlList[0].Label}} </a>
             <ul class="dropdown-menu" ng-if="urlList.length>1">
                 <li ng-repeat="url in urlList" ng-if="$index > 0">
                     <a href="{{url.Path}}">{{url.Label}}</a>
                 </li>
             </ul>
             <a href="{{urlList[0].Path}}" ng-if="urlList.length==1">{{urlList[0].Label}}</a>
         </li>
         <li ng-class="{'dropdown':urlList.length>1}" ng-show="navBarCtrl.isUserAuthenticated" ng-repeat="urlList in navBarCtrl.AuthenticatedUrls">
             <a href="" data-toggle="dropdown" class="dropdown-toggle" ng-if="urlList.length>1">{{urlList[0].Label}}  <b class="caret"></b></a>
             <ul class="dropdown-menu" ng-if="urlList.length>1">
                 <li ng-repeat="url in urlList" ng-if="$index > 0">
                     <a href="{{url.Path}}">{{url.Label}}</a>
                 </li>
             </ul>
             <a href="{{urlList[0].Path}}" ng-if="urlList.length==1">{{urlList[0].Label}}</a>
         </li>
     </ul>
</div>

希望这可以让您对如何使您的工作有所了解。

于 2016-04-21T12:58:34.090 回答
0

您可以将模板放入单个指令中：

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 回答