Use Directive two times in one controller AngularJS

Question

I want to use same directives multiple times in one controller in AngularJS. I want to create a list widget that can be used multiple times. I can display two widgets at the same time under the same controller. But, I am unable to bind teamA and teamB data to ng-repeat in my directive. In addition to that, the code fails during addTeamMember() because datasource is undefined. I was hoping that datasource will be updated with teamA and teamB respectively.

Here is the HTML code.

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

Could anyone please help me out here? I want to create custom Widgets that can be used multiple places either in same controllers or in different controllers.

Thanks

Here, datasource is the name of your variable in directive scope, not the attribute name. Use datasource: "=datasource" so you can use datasource attribute in your HTML. datasource: "=" works too (shortcut for using same name as attribute) — Neozaru
– Neozaru, Commented Feb 23, 2015 at 20:38
I have corrected the "=datasource" in my HTML. But, If I have initialize teamA and teamB data in controller, then I don't see any data in the directive. I might be missing something for binding data between controller and directive. Any thoughts? — Dev Null Fin
– Dev Null Fin, Commented Feb 23, 2015 at 21:46

Davin Tryon · Accepted Answer · 2015-02-23 21:26:06Z

1

As @Neozaru pointed out in comments. You are expecting the directive attribute to be called team-members here:

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

You do this when you define the isolated scope as:

scope: {
    datasource: "=TeamMembers"
}

The above line is saying, "team-members is what the outside attribute will be named, but internally I'll refer to the referenced object as scope.datasource".

answered Feb 23, 2015 at 21:26

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Directive two times in one controller AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related