AngularJS – Binding Component Variable to receive values from html

  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.

angular.
module('grid').
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;
this.$onInit=function(){
    self.peId=self.peId;
    console.log(self.peId);
 }
 //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($scope.imageArray, self.peId);
      $scope.$watch("imageArray", function (val) { //ADDED THE WATCH AND CAN NOW SEE THE VALUE UNDEFINED, THEN POPULATED CORRECTLY
        console.log(val);
    });

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?

Source: AngularJS Questions

Leave a Reply

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