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

12 浏览
0 Comments

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

我有一个QueueController.js文件，用于处理AJAX查询。我如何将数据从我的控制器传递到我的指令，并在模态框中显示它。谢谢。

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){
             // 在获取数据后，我想将数据传递给指令
        }).error(function (data){
            console.log(data);
        });
    }

ModalDirective.js

app.directive("removeMe", function($rootScope) {
      return {
            link:function(scope,element,attrs)
            {
                  // 从Call函数获取数据并追加结果，然后调用模态框
                    $('#AttentionModal').modal('show');
            }
      }
});

Frontline.blade.php

                    
                    
Attention

                     
客户是否到达？

0

3 答案

0 Comments

问题的出现原因是在Angular的控制器（QueueController）中，需要将数据传递给一个指令（directive）。解决方法是在控制器中使用$rootScope.$broadcast方法广播数据，然后在指令中使用$scope.$on方法接收数据并进行处理。

具体的解决方法如下：

在控制器中使用$rootScope.$broadcast方法广播数据：

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

在指令中使用$scope.$on方法接收数据并进行处理：

$scope.$on('myData', function(event, data){
   //在这里使用你的数据
})

0
0 Comments

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

在使用Angular时，有时需要从控制器中调用指令并传递数据给它。下面提供了几种示例方法来实现这一目的。

方法一：使用服务/工厂

可以创建一个服务或工厂来处理数据传递。示例代码如下：

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

方法二：使用$watch

可以使用$watch来监听数据变化并进行相应的处理。示例代码如下：

app.directive('displayDataOne', function (postService) {
  return {
    restrict: 'EA',
    template: '
{{response}}
',
    link: function (scope) {
      scope.$watch(function () {
        return postService.response
      }, function (newValue) {
        scope.response = newValue
      })
    }
  }
})

方法三：双向数据绑定

可以使用双向数据绑定来显示数据。示例代码如下：

app.directive('displayDataTwo', function (postService) {
  return {
    restrict: 'EA',
    template: '
{{myCall.response}}
',
    link: function (scope) {
      scope.myCall = postService
    }
  }
})

方法四：不使用作用域

如果不使用作用域，模型中的数据会直接传递给父作用域。示例代码如下：

app.directive('displayDataThree', function () {
  return {
    restrict: 'EA',
    template: '
{{postService.response}}
',
  }
})

方法五：使用双向数据绑定和作用域

可以通过属性和作用域来实现双向数据绑定。示例代码如下：

app.directive('displayDataFour', function () {
  return {
    restrict: 'EA',
    template: '
{{myInfo}}
',
    scope: {
      myInfo: '=info'
    }
  }
})

通过以上几种方法，我们可以方便地从控制器调用指令并传递数据给它。具体选择哪种方法取决于项目的需求和个人偏好。

0
0 Comments

问题的原因是想要在控制器中调用指令并传递数据给指令，但不知道如何实现。解决方法是通过在指令中使用$scope进行数据绑定，并在控制器中设置数据值，然后在HTML中调用指令并传递数据。

具体解决方法如下：

1.在Angular的应用程序中创建一个指令，并使用$scope来绑定数据。在这个例子中，指令名为"removeMe"，并且使用了一个叫做"yourDirectiveData"的属性来接收数据。

app.directive("removeMe", function($rootScope) {
      return {
           restrict:'E',
           scope: {
               yourDirectiveData: '=' 
            },
            link:function(scope,element,attrs)
            {    
            }
      }
});

2.在HTML中调用指令，并通过属性"yourDirectiveData"来传递数据。在这个例子中，使用双大括号语法来绑定控制器中的数据，数据的值为"CtrlData"。

<removeMe yourDirectiveData="{{CtrlData}}"></removeMe >

3.在控制器中设置数据的值。在这个例子中，使用$scope来设置"CtrlData"的值为"xyz"。

$scope.CtrlData='xyz';

通过以上方法，你可以在控制器中调用指令并传递数据。如果需要更多的信息，可以参考上面提供的链接。

0