Angular passing information through directive

Question

I have this directive for a simple button

App.directive('questionbutton', function(){
    return {
        restrict: 'E',
        templateUrl: 'views/question-button.html'
    };
});

I have another directive for a simple modal with a form in it

App.directive('questionmodal', ['Question', function(Question){
    return {
        restrict: 'E',
        templateUrl: 'views/questionmodal.html',
        link: function (scope, element, attrs) {

            var question = {};
            var author = {};
            scope.sendQuestion = function (){
                question.body = scope.question.body;
                new Question(question).$save();
            });
        };
    }
    };
}]);

here is my questionmodal.html :

<div id="questionModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Contact Team ?</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" name="questionForm">
<!-- Subject -->
                    <div class="form-group form-group-sm">
                        <label for="inputSubject" class="col-sm-3 control-label">Subject *</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" required data-ng-model="about" id="inputSubject">
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="form-group form-group-sm">
                        <label for="inputBody" class="col-sm-3 control-label">Body *</label>
                        <div class="col-sm-9">
                            <textarea  rows="10" class="form-control" required data-ng-model="question.body" id="inputBody"></textarea>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="sendQuestion()" data-ng-disabled="questionForm.$invalid">Send</button>
            </div>
        </div>
    </div>
</div>

In an html page I'm using the data-ng-repeat to init a simple table :

<table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Action</th>
       </thead>
       <tbody>
            <tr data-ng-repeat="application in applications">
                <td>{{application.id}}</td>
                <td>{{application.name}}</td>
                <td>
                     <questionbutton about="{{applicaiton.name}}"></questionbutton>
                </td>
       </tbody>
</table>
<questionmodal></questionmodal>

Here is the question-button.html :

<button  class="btn btn-sm btn-primary" data-toggle="modal" data-target="#questionModal">
    <a href="" style="color:white;" data-toggle="tooltip" data-container="body" title="Any question about this item ? Please, Tell us !">
        <span class="glyphicon glyphicon-question-sign glyphicon-white" ></span>
    </a>
</button>

My issue is how can I share the "about" properties from my button to my modal in a good way ?

Answer 1

You may go with below mentioned approaches

• Service/Factory: Crete or use any existent factory/service and share data through it among directives.
• Use scope: As both directives are used under controller you can easily use 'scope' in directive and share data either with '=' or '@'

Answer 2

first remove the curly brackets when you are assign data to directive scope

<questionbutton about="applicaiton.name"></questionbutton> 

Now you can pass the value to first directive (questionbutton). From that you can communicate the scope between directives like this.

App.directive('questionbutton', function() {
        return {
            restrict: 'E',
            scope: {
                about: "="
            }
            templateUrl: 'views/question-button.html',
            link: function(scope, element, attrs) {}
        };
    });
    App.directive('questionmodal', ['Question', function(Question) {
        return {
            restrict: 'E',
            templateUrl: 'views/questionmodal.html',
            link: function(scope, element, attrs) {
                console.log(scope.about);
                var question = {};
                var author = {};
                scope.sendQuestion = function() {
                    question.body = scope.question.body;
                    new Question(question).$save();
                });
            };
        };
    }]);

check this similar answer