How Do I call and pass data to a Directive from a Controller Angular

Question

I have a QueueController.js which handles AJAX query. How do I pass the data from my CONTROLLER to my DIRECTIVE and show it to the Modal. Thanks.

QueueController.js

app.controller('QueueController', function($scope, $http, $interval, $modal) {
     $scope.Call = function(trans_id){
        $http({
            url: $locationProvider + 'query_stransaction',
            method: "GET",
            params: { trans_id: trans_id }
        }).success(function (data){
             // I WANT TO PASS DATA HERE TO DIRECTIVE AFTER RETRIEVING DATA
        }).error(function (data){
            console.log(data);
        });
    }

ModalDirective.js

app.directive("removeMe", function($rootScope) {
      return {
            link:function(scope,element,attrs)
            {
                  // GET DATA FROM CALL FUNCTION AND APPEND RESULTS AND CALL
                   //MODAL
                    $('#AttentionModal').modal('show');

            }
      }
});

Frontline.blade.php

<div ng-controller="QueueController" class="modal fade" id="AttentionModal" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Attention</h4>
                </div>
                <div class="modal-body">
                     <h3>Did the client arrive? <span id="queue_no"></span></h3>
                </div>
                <div class="modal-footer">
                    <div class="row" id="client_confirmation" trans>
                            <div class="col-md-6">
                                <button ng-click="clientShow()" class="btn-block btn  btn-primary">Yes</button>
                            </div>
                            <div class="col-md-6">
                                <button ng-click="clientNoShow()" class="btn-block btn red-pink">No Show</button>
                            </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>

score 2 · Accepted Answer · answered Jun 19 '15 at 10:27

It looks like it's going to be something reused so I'd strongly suggest to use service/factory I've made few examples for you of the way to pass data to directive

app.service('postService', function postService($http) {
  var postDataMethod = function (formData) {
    $http.post('http://edeen.pl/stdin.php', formData)
      .success(
        function (data) {
          service.response = data
        })
      .error(
        function (data) {
          service.response = data
        })
  }
  var service = {
    postData: postDataMethod,
    response: '{wating for response}'
  };
  return service
})
//with a $watch if you have to do data modification when response change
app.directive('displayDataOne', function (postService) {
  return {
    restrict: 'EA',
    template: '<div>{{response}}</div>',
    link: function (scope) {
      scope.$watch(function () {
        return postService.response
      }, function (newValue) {
        scope.response = newValue
      })
    }
  }
})
//two way data binding to display data
app.directive('displayDataTwo', function (postService) {
  return {
    restrict: 'EA',
    template: '<div>{{myCall.response}}</div>',
    link: function (scope) {
      scope.myCall = postService
    }
  }
})
//without scope, model with a '.' (dot) goes directly to a parent scope
app.directive('displayDataThree', function () {
  return {
    restrict: 'EA',
    template: '<div>{{postService.response}}</div>',
  }
})
//two-way data binding by attribute and scope '='
app.directive('displayDataFour', function () {
  return {
    restrict: 'EA',
    template: '<div>{{myInfo}}</div>',
    scope: {
      myInfo: '=info'
    }
  }
})

score 1 · Answer 2 · edited May 23 '17 at 12:25

 app.directive("removeMe", function($rootScope) {
      return {
           restrict:'E',
           scope: {
               yourDirectiveData: '=' // used this way
            },
            link:function(scope,element,attrs)
            {    
            }
      }
});
//In Html
  <removeMe yourDirectiveData="{{CtrlData}}"></removeMe >
//In controller
  $scope.CtrlData='xyz';

this way you can send data from controller to directive. For more infomation you can refer this

score -1 · Answer 3 · answered Jun 19 '15 at 10:02

-1

In your 'QueueController', broadcast your data using,

 $rootScope.$broadcast('myData', data);

And in your directive,

  $scope.$on('myData', function(event, data){
       //use your data here
  })

answered Jun 19 '15 at 10:02

Virtual Realist

175
6
19

How Do I call and pass data to a Directive from a Controller Angular

QueueController.js

ModalDirective.js

Frontline.blade.php

3 Answers3