如何从控制器调用指令并将数据传递给指令 Angular

Question

我有一个 QueueController.js 可以处理 AJAX 查询。如何将数据从我的 CONTROLLER 传递到我的 DIRECTIVE 并将其显示给 Modal。谢谢

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>

Answer 1

 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

Answer 2

在您的 'QueueController' 中，使用

广播您的数据

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

在你的指令中，

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

Answer 3

看起来它会被重复使用，所以我强烈建议使用 service/factory 我已经为您提供了几个将数据传递给指令的方式的示例

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'
    }
  }
})

如何从控制器调用指令并将数据传递给指令 Angular

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

controller

laravel

angularjs

angularjs-directive

QueueController.js

ModalDirective.js

Frontline.blade.php