AngularJS在指令之间共享控制器

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

Answer 1

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.

Answer 2

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.