Angularjs Sharing controller between directive

Question

While implementing angularjs directive i have got some issues in sharing controller between directive

i cant access the enterUser directive from the below controller

app.directive('entires', [function () {
  return {
    restrict: 'E',
    replace: true,
    scope : {
      user : '='
    },
    require : '^?enterUser',
    template:"<div><b>Time : </b>{{user.name}}  <b>Task :</b> {{user.age}} <a ng-click='delete(user);'><u>Delete Entry</u></a> <br></div>",
    link: function (scope, iElement, iAttrs, enterUserctrl) {
     console.log(ctrl)
    //here i got enterUserctrl undefined..
    // i want like to call delete function from here
    enterUserctrl.delete(user); 


    }

  };
}])

here the current working fiddle

You got undefined because div[enterUser] is not in the parent tree of div[entires]. — Banana-In-Black
– Banana-In-Black, Commented Dec 18, 2013 at 10:09
Try to ng-repeat users in the template of directive enterUser. — Banana-In-Black
– Banana-In-Black, Commented Dec 18, 2013 at 10:11

dfsq · Accepted Answer · 2013-12-18 11:21:31Z

5

I modified your code a little. Two main errors: enter-user should wrap entires so angular could find it for require. And the second is that you need to use transclude in your case.

Take a look at the code

app.directive('enterUser', function () {
    return {
        restrict: "A",
        transclude: true,
        templateUrl: 'enter-user.html',

        controller: function ($scope) {

            $scope.addToList = function (name, age) {
                if (typeof $scope.userName != 'undefined' && typeof $scope.userAge != 'undefined') {
                    $scope.nameList.push({
                        name: $scope.userName,
                        age: $scope.userAge
                    })
                    $scope.userName = '';
                    $scope.userAge = '';
                }
            };

            this.delete = function(user) {
                if (typeof user != 'undefined') {
                    $scope.nameList.pop();
                }
            };
        }
    };
});

enter-user.html

<div>
    <b>Name: </b>
    <input ng-model='userName' type='text' />
    <br>

    <b>Age  : </b> 
    <input ng-model='userAge' type='text' />
    <br>

    <span class='right'><button ng-click='addToList(userName, userAge);'>Add to List</button></span>

    <!-- insert trascluded content here -->
    <div ng-transclude></div>
</div>

entires directive

app.directive('entires', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            user: '='
        },
        require: '^enterUser',
        templateUrl: "entires.html",
        link: function (scope, iElement, iAttrs, enterUserCtrl) {
            scope.delete = function(user) {
                enterUserCtrl.delete(user)
            }
        }
    };
});

index.html

<div enter-user>
    <b><u>Here is my entries listed </u></b>
    <div ng-repeat="user in nameList">
        <entires user="user"></entires>
        <br>
    </div>
</div>

Demo Plunker

Also your delete function does not work properly. But this is little thing.

answered Dec 18, 2013 at 11:21

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Wild Goat Over a year ago

Doesn't work, if you try delete user in the middle, it deletes last one.

dfsq Over a year ago

@WildGoat Here is correct version of the code using splice to delete items: plnkr.co/edit/U8eBda8bKVgfwoRRFKkp?p=info

Maxim Shoustin · Accepted Answer · 2013-12-18 10:39:31Z

1

From your code the <div enter-user></div> is separated from second directive entires.

If entires directive uses parent directive enterUser the structure I think should be something like:

 <div enter-user>
      <div ng-repeat="user in nameList track by $index">
          <entires user="user"></entires>
      </div>
   </div>

You can see THIS demo that might help you.

^ – Will look for the directive on parent elements, if not available on the same element.

From child directive:

require : '^?enterUser',

If we remove ? we will get an error that parent directive not found. So this is a issue.

edited Dec 18, 2013 at 10:39

answered Dec 18, 2013 at 10:34

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

Angularjs Sharing controller between directive

2 Answers 2

enter-user.html

entires directive

index.html

Demo Plunker

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

enter-user.html

entires directive

index.html

Demo Plunker

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related