如何从控制器 Angular 调用和传递数据到指令

Question

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

---

队列控制器.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.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'
    }
  }
})

Answer 2

 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';

这样您就可以将数据从控制器发送到指令。 有关更多信息，您可以参考此

Answer 3

在您的“QueueController”中，使用广播您的数据，

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

在你的指令中，

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