如何通过 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>
我找到了关于在自定义指令中使用 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>