AngularJS – Binding Component Variable to receive values from html is Being Overwritten

  angularjs, data-binding, javascript

I have been using angularJS v1.5+ and I’m trying to bind variable from the html to the component level.

I checked various answers but none seemed to help me hence this question so something else I must be missing here

There is a component named grid here is the code for the component.

component('grid', {
bindings: { imageArray: '<', peId: '@'},
templateUrl: 'editor_v2/app/grid/grid.template.html',
controller: ['$scope', '$compile', '$cookies','$http', 'EsData', '$timeout', 'imgixService', 
    function gridCtrl($scope, $compile, $cookies, $http, EsData, $timeout,imgixService) {
$scope.imageRatio = "16_9";
$scope.imageRatioW = "16";
$scope.imageRatioH = "9";
$scope.imagePerRow = "6";
// $scope.imageArray = this.imageArray;
$scope.imagesExist = true;
// $scope.peId = this.peId;
// $scope.peId = "pei1";

var self=this;
    self.imageArray = self.imageArray;
 //more code not relevant here

Here is how I’m trying to send data in html

<grid ng-show="detailPics.length>0" image-array="detailPics" pe-id="strAnswer" style="width: 100%; height: 100%; background-color: #ccc;"></grid>

However on console.log I first get peId as the value intended i.e. strAnswer then after that it console logs again but this time it’s undefined What am I missing here I want to bind this data from html so I can use this component anywhere.

EDIT: okay I’m getting peId as expected but I have another function called this one.

$scope.$root.changeGridPics = function(imgArr){
      console.log(self.imageArray, self.peId);

I’m actually using this grid component in 2 places where at the first place I passed divAnswer1 and the second place I passed divAnswer in pe-id attribute now When I’m trying to load this grid at second place I’m getting peID values as divAnswer1 but it should be divAnswer why is this happening? It gets overwritten.

Source: AngularJS Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.