angularjs：指令和NG-重複

Question

我想表明從HomeController的用戶與註銷按鈕在一起。我試過使用指令，但它只顯示按鈕沒有別的....這是我的代碼。

這是指令

(function() { 
    'use strict'; 
    angular.module('chatApp').directive('userDirective', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       userList: '=' 
      }, 
      templateUrl: 'src/home/user.tpl.html' 
     }; 
    }); 
})(); 

這是模板指導

<div> 
    <img ng-src="{{userList.icon}}"> 
    <p>{{userList.name}}</p> 
</div> 

這裏是HomeController的

(function() { 
    'use strict'; 
    function HomeController($scope) { 
     $scope.homeController = {}; 
     $scope.homeController.users = [ 
      { 
       icon: 'img/online.png', 
       name: 'asdasd' 
      }, 
      { 
       icon: 'img/online.png', 
       name: 'asdasd' 
      }, 
      { 
       icon: 'img/online.png', 
       name: 'asdasd' 
      }, 
      { 
       icon: 'img/online.png', 
       name: 'asdasd' 
      } 
     ]; 
    } 

    angular.module('chatApp').controller('homeController', HomeController); 
})(); 

這裏是控制器模板

<div id="wrapper"> 
    <input type="button" id="logOut" value="Sign Out"> 
    <div ng-repeat="user in homeController.users"> 
     <user-directive userList="user"></user-directive> 
    </div> 
</div> 

個

Answer 1

角轉換屬性名稱破折號分隔的形式。在你的HTML，使用user-list代替userList。

<user-directive user-list="user"></user-directive> 

從Angular's docs：

角歸一化的元件的標記和屬性名稱，以確定哪些元素匹配哪個指令。我們通常通過其區分大小寫的camelCase規範化名稱（例如，ngModel）來引用指令。然而，因爲HTML是不區分大小寫，我們指的是指示在DOM由小寫形式，通常使用在DOM元素劃線分隔屬性（例如NG-模型）。