Question

说明：

我为角度应用创建了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>

withoutlogin-header.html：

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

要求：

我们必须根据different headers显示user roles。即如果用户未登录，那么我们必须使用login button显示正常标头，如果用户已经登录，那么我们必须显示logout button的不同标头。

我们面临的挑战：

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

我到目前为止尝试过：

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

任何直接的帮助都会非常值得注意。感谢

Answer 1

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

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

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

Answer 2

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

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提及。

Answer 3

我有类似的情况，我为匿名用户显示一个特定的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>

希望这可能会让您知道如何让您的工作。

AngularJS：使用指令

3 个答案: