如何通过Angular中的$ resource从custom指令发送输入值?

时间:2016-05-02 22:13:14

标签: javascript angularjs angularjs-directive angular-material angular-resource

我已经找到了在自定义指令中使用ngModel的答案,我理解了这个概念,但我不确定在使用$ resource时我是否理解如何实现它。

我成功注入"文件"我的指令范围,并且我正在进行api调用,但返回到我的服务器的值为null。我确信我的Angular指令实现是我的错。

directive.js

angular.module('pro').directive('buyLinkBox', function() {
     return {
        restrict: "AE",
        replace: true,
        template: '<md-input-container md-no-float md-block><label style="font-size:2.2vh">Buy Link for {{file.filename}}</label><input type="text" ng-blur="sendLink()" ng-model="file.buyLink" name="buyLink" id="buyLink"/></md-input-container>',
        scope: {
            file: '=',
        },
        controller: function($scope, $route ,BuyLinkService){

            $scope.sending = BuyLinkService.get({
                FileId: $scope.file._id
            });

            $scope.sendLink = function() {
                $scope.sending.$sendLink(function() {
                    $route.reload();
                }, function(errorResponse) {
                    alert('nope');
                });
            };



        }
     }
});

HTML

 <buy-link-box file="file"></buy-link-box>

1 个答案:

答案 0 :(得分:0)

扣除一些后,我找到了解决方案。

我将ngModel添加到指令范围并将其包含在我的html中。但主要问题是我的资源在获取数据之前被调用了。修复当然很简单。我创建了一个回调并在启动我的PUT api调用之前将我想要的字段设置为输入变量。

希望这有助于某人。

<强> directive.js

    angular.module('pro').directive('buyLinkBox',['BuyLinkService', '$route', 
        function(BuyLinkService, $route) {
         return {
            restrict: "E",
            replace: true,
            template: '<md-input-container md-no-float md-block><label style="font-size:2.2vh">Buy Link for {{file.filename}}</label><input type="text" ng-blur="sendLink()" ng-model="ngModel" name="buyLink" id="buyLink"/></md-input-container>',
            scope: {
                file: '=',
                ngModel: '='
            },
            link: function(scope, element, attrs){

                scope.sendLink = function() {
                    BuyLinkService.get({MixedId: scope.file._id}, function(data){
                    data.buyLink = scope.file.buyLink;
                    data.$sendLink(function(file) {
                        alert(file.buyLink);
                        $route.reload();
                    }, function(errorResponse) {
                        alert('nope');
                    });
                })
              }
            }
         }

  }]);

<强> HTML

<buy-link-box ng-model="file.buyLink" file="file"></buy-link-box>