Question

我想在AngularJS的一个控制器中多次使用相同的指令。我想创建一个可以多次使用的列表小部件。我可以在同一个控制器下同时显示两个小部件。但是，我无法在我的指令中将teamA和teamB数据绑定到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 = {};
} ] );

Directive.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>

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

由于

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"
}

上面一行说，＆＃34; team-members是外部属性的名称，但在内部我将引用的对象称为{{1 }}＆＃34;

在一个控制器AngularJS中使用指令两次

1 个答案: