Answer the question
In order to leave comments, you need to log in
AngularJS how to fix error?
Hello guys, I just can not figure out how to get out of this situation. It throws this error errors.angularjs.org/1.6.6/$injector/strictdi?p0=C... but my code structure is completely different, I provide the code:
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngAnimate from 'angular-animate';
import uiBootstrap from 'angular-ui-bootstrap';
export class CategoryComponent {
$http;
socket;
nameCategory = [];
constructor($http, $scope, socket) {
this.$http = $http;
this.socket = socket;
$scope.$on('$destroy', function() {
socket.unsyncUpdates('categorys');
});
}
$onInit() {
this.$http.get('/api/categorys')
.then(response => {
this.nameCategory = response.data;
this.socket.syncUpdates('categorys', this.nameCategory);
})
.catch(response =>
console.log('error')
)
}
}
export default angular.module('directives.category', [uiRouter, ngAnimate,uiBootstrap,'UserValidation'])
//.config(routing)
.component('category', {
template: require('./item-category.html'),
controller: CategoryComponent,
})
.name;
/* <input ng-model="$ctrl.modalData.name"> <input ng-model="$ctrl.modalData.value"><br> */
angular.module('directives.category')
.component('myModal', {
template: `<div class="modal-body">
<h2 class="h2Modal">Shipping information</h2>
<img class= "miniImg" src="{{$ctrl.resolve.modalData.img}}" alt="" />
<div class="infoModal">
<form name="myForm">
<div class="form-group"><label class="infoCategory">Product: </label> <label class="info" ng-bind="$ctrl.resolve.modalData.name"></label></div>
<div class="form-group"><label class="infoCategory">Your e-mail:  </label> <span style="width: 150px;" class="input-group clearfix MainEmail input-group-sm">
<input id="email" type="email" name="email" ng-model="$ctrl.resolve.modalData.email" ng-model="formData.email" style="width: 150px;" class="form-control borderStyle" placeholder="Your Email" required/>
</span>
<span class="dangeSpan" ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
<span class="dangeSpan" ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
</div>
<div class="form-group"><label class="infoCategory">Enter the quantity:  </label> <input style="width: 107px;" type="number" id="quantity" name="quantity" class="form-control" min="1" max="5" ng-model="$ctrl.resolve.modalData.amount" ng-model="formData.quantity" placeholder="Write number" required/>
<span class="dangeSpan" ng-show="!myForm.quantity.$error.required && (myForm.quantity.$error.min || myForm.quantity.$error.max) && myForm.quantity.$dirty">quantity ust be between 1 and 5</span>
</div>
<div class="form-group"><label class="infoCategory">Price per item: <span class="fw">$</span></label> <label class="info" class="form-control" ng-bind="$ctrl.resolve.modalData.price"></label></div>
<button class="btn btnModal btn-success btn-lg" type="submit" ng-disabled="!myForm.$valid" ng-click="$ctrl.handleClose()">To Order</button>
</div>
</form>
<button type="button" class="close btn-lg" ng-click="$ctrl.handleDismiss()" aria-label="Close">
<span class="spanClose" aria-hidden="true">×</span>
</button>
</div>
`,
bindings: {
modalInstance: "<",
resolve: "<",
},
controller: [function() {
var $ctrl = this;
$ctrl.$init = function() {
$ctrl.modalData = $ctrl.resolve.modalData;
}
/*
function dataB() {
var dataBS;
$ctrl.dataBs = $ctrl.resolve.modalData;
return dataBs;
}
console.log(dataB()); */
$ctrl.handleClose = function() {
console.info("in handle close");
$ctrl.modalInstance.close($ctrl.modalData);
};
$ctrl.handleDismiss = function() {
console.info("in handle dismiss");
$ctrl.modalInstance.dismiss("cancel");
};
}]
});
angular.module('directives.category')
.component('myContent', {
template: '<button type="button" class="btn btnBuy btn-info btn-lg btn-default" ng-click="$ctrl.open($event)">Buy now</button>',
controller: ['$uibModal','$http', function($uibModal,$http) {
var $ctrl = this;
$ctrl.open = function($event) {
// var target = $event.currentTarget; // где был клик?
let parent = $event.currentTarget.parentNode.parentNode;
let parentPrice = " ";
parentPrice = parent.querySelector('div.price').innerHTML;
// var priceProduct = parseInt(parentPrice.replace(/\D+/g,""));
// var priceProduct = parseInt(parentPrice.replace(/\D+:\s*\$\s*([\d.]+)/g, ""));
let priceProduct = parentPrice.match(/\D+:\s*\$\s*([\d.]+)/g).join('').replace(/Price: \$/g, '');
let nameProduct = parent.querySelector('span').innerHTML;
let imgProduct = parent.querySelector('img').src.replace(/http:\/\/localhost:3000/g, '') ;
let count=1;
console.log(priceProduct);
// console.log(imgProduct);
// console.log(parent);
$uibModal.open({
component: "myModal",
resolve: {
modalData: function() {
return $ctrl.dataForModal = {
amount: count,
price: +priceProduct*count,
name: nameProduct,
img: imgProduct,
email: '',
flag:0
//CommonAmount: 20
}
}
}
}).result.then(function(result) {
//console.info("I was closed, so do what I need to do myContent's controller now. Result was->");
//console.info(result);
console.info($ctrl.dataForModal);
$http.post('/api/orders',$ctrl.dataForModal)
.then( res =>
console.info("vse ok")
)
.catch( res =>
console.info('error')
);
}, function(reason) {
console.info("I was dimissed, so do what I need to do myContent's controller now. Reason was->" + reason);
});
};
}]
});
angular.module('UserValidation', []).directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.myForm.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
})
Answer the question
In order to leave comments, you need to log in
The CategoryComponent class has no annotations and Angular doesn't know what to pass to the constructor.
do this:
export class CategoryComponent {...}
CategoryComponent.$inject = ['$http', '$scope', 'socket'];
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question