内容简介:翻译自:https://stackoverflow.com/questions/34329517/how-to-use-npm-module-in-angular
我正在尝试使用带有AngularJS的
braintree-web
npm模块,因为当我尝试将其包含在模板中时出现错误:
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
我有一个名为billing的状态,我用它来路由到我的模板,控制器’BillingController’.我希望能够注入braintree-web和myscript.js:
<script>
braintree.setup(
// Replace this with a client token from your server
clientToken,
"dropin", {
container: "payment-form",
form: "checkout",
});
</script>
请帮忙.我怎样才能做到这一点?
编辑:
目前,这是我的最底层
<!-- braintree sdk -->
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<!-- braintree setup -->
<script>
var clientToken = removed;
braintree.setup(
// Replace this with a client token from your server
clientToken,
"dropin", {
container: "payment-form",
form: "checkout",
});
</script>
这些是我得到的错误:
看起来像braintree脚本没有加载(?)
谢谢您的帮助
你是否使用这个网址的braintree-web?
https://github.com/jeffcarp/braintree-angular
这是角度特殊的模块.然后你应该创建像app.js这样的文件并粘贴这段代码:
var yourApp = angular
.module('yourApp', ['braintree-angular'])
.constant('clientTokenPath', '/path-or-url-to-your-client-token');
例如:
(function () {
'use strict';
var app = angular.module('yourModuleName', [
'braintree-angular'
]);
app.constant('clientTokenPath', '/path-or-url-to-your-client-token');
app.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
}());
你的controller.js可能是这样的:
(function() {
'use strict';
angular
.module('yourModuleName')
.controller('DashboardCtrl', DashboardCtrl);
DashboardCtrl.$inject = ['$scope', '$braintree'];
function DashboardCtrl($scope, $braintree) {
var client;
$scope.creditCard = {
number: '',
expirationDate: ''
};
var startup = function() {
$braintree.getClientToken().success(function(token) {
client = new $braintree.api.Client({
clientToken: token
});
});
};
$scope.payButtonClicked = function() {
// - Validate $scope.creditCard
// - Make sure client is ready to use
client.tokenizeCard({
number: $scope.creditCard.number,
expirationDate: $scope.creditCard.expirationDate
}, function (err, nonce) {
// - Send nonce to your server (e.g. to make a transaction)
});
};
startup();
}
}());
请注意,app.js应该包含在其余的控制器,工厂和服务之前,以及在angular.js和braintree.js库之后.
翻译自:https://stackoverflow.com/questions/34329517/how-to-use-npm-module-in-angular
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。