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

How to send input value from custom directive through $resource in Angular?

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

我成功地将 "file" 范围注入到我的指令中,并且我正在调用 api,但是返回到我的服务器的值为空。我确定我的 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>

经过一番推导,我找到了解决办法。

我将 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>