javascript - 在一个 Controller AngularJS 中使用指令两次

Question

我想在 AngularJS 的一个 Controller 中多次使用相同的指令。我想创建一个可以多次使用的列表小部件。我可以在同一个 Controller 下同时显示两个小部件。但是，我无法在指令中将 teamA 和 teamB 数据绑定(bind)到 ng-repeat。除此之外，代码在 addTeamMember() 期间失败，因为数据源未定义。我希望数据源将分别更新为 teamA 和 teamB。

这是 HTML 代码。

<div ng-controller="myCtrl"><div class="container">
   <my-directive datasource="model.teamA"></my-directive>
   <my-directive datasource="model.teamB"></my-directive>
</div></div>

Controller .js:

angular.module('app',[])
   .controller('myCtrl', [ '$scope', function($scope){
       $scope.teamA = {};
       $scope.teamB = {};
} ] );

指令.js:

angular.module('app', [] )
   .directive('myDirective', function(){
       return{
           restrict: 'AE',
           templateUrl: 'directive_html.html',
        scope: {
            datasource: "=TeamMembers"
        },
        transclude: true,
        link: function(scope, elem, attrs){
            scope.addTeamMember = function(){
                 scope.datasource.push({});
            };
            scope.removeTeamMember = function(item){
                 scope.datasource.splice(item, 1);
            };
        }
    };
}) ;

directive_html.html:

<div><div class="container">
    <div class="form-group" ng-repeat="member in TeamMembers">
        <textarea ng-model="member.text" rows="2"></textarea> 
        <a href="" ng-click="removeTeamMember($index)">Remove</a>
    <div>
    <button type="button" ng-click="addTeamMember()">Add</button>
</div></div>

有人可以帮我吗？我想创建可以在同一 Controller 或不同 Controller 中的多个位置使用的自定义小部件。

谢谢

Answer 1

正如@Neozaru 在评论中指出的那样。您期望指令属性在此处被称为 team-members:

<div ng-controller="myCtrl"><div class="container">
   <my-directive team-members="model.teamA"></my-directive>
   <my-directive team-members="model.teamB"></my-directive>
</div></div>

当您将隔离范围定义为:

scope: {
    datasource: "=TeamMembers"
}

上面的行表示，“team-members 是 outside 属性的名称，但在内部我将引用的对象称为 范围.数据源”。