簡體   English   中英

如何通過Angular中的$ resource從custom指令發送輸入值?

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

我已經找到了在自定義指令中使用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>

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

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM