AngularJS：使用指令的最佳方式

Question

解释 ：

我为我的 angular 应用程序创建了一个header directive 。 通过使用此指令，我们根据某些条件使用属性的templateUrl属性加载template 。

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>

要求 ：

我们必须根据user roles显示different headers 。即如果用户没有登录，那么我们必须显示带有login button普通标题，如果用户已经登录，那么我们必须显示带有logout button不同标题。

我们面临的挑战：

header指令无法正常工作。 当我们点击login button从withoutlogin-header.html这不加载另一个模板withlogin-header.html基于定义的条件templateUrl指令的财产。

我到目前为止尝试过：

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';
      }
    }]
  }
});

编辑：或者如果你想坚持使用单独的模板文件，你可以使用@Stepan Kasyanenko 提到的ng-include 。

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>

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