Component binding not working : Angularjs

Question

Component binding not working : Angularjs

4.4k views Asked by Khilen Maniyar At 15 September 2024 at 15:10

Hi I'm trying to create a component, it works fine in controller, however not binding values to view.

My Component is as below

app.component("bdObjects", {
    templateUrl: "app/templates/components/BusinessObjects.html",

    controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
        function ($scope, $http, $log, API_ROOT, VisDataSet) {


        $scope.fnAdd = function() {
            $scope.objectId = "";
            $scope.objectName = "Test Object";
            console.log($scope.objectName);
        }

        $scope.cancelAdd = function() {
            if($scope.items.length > 0) {
                $log.info($scope.items[0]);
                $scope.fnPopulateForm($scope.items[0]);
            }
        }
    }], 

    bindings: {
        data: "=",
        objectId: "=",
        objectName: "="
    }
});

My Template

<div class="general-form">
    <input type="hidden" name="id" ng-model="objectId">
    <label>Name:</label>
    <br>
    <input class="form-control" name="name" placeholder="Name" ng-model="objectName">
    <br>
</div>

So on add button I tried to assign value to input box. but it's not taking. and I want to make that two way binding. so later I'll have save button, so changing the value in TextBox will replace in Controller.

Thanks.

Original Q&A

There are 3 answers

T.Gounelle On 17 December 2016 at 09:37

In controller, change $scope by this or some alias, e.g.

controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
    function ($scope, $http, $log, API_ROOT, VisDataSet) {
        var ctrl = this;

        ctrl.fnAdd = function() {
            ctrl.objectId = "";
            ctrl.objectName = "Test Object";
            console.log(ctrl.objectName);
        }

        // Not sure about items: you haven't defined it,
        // neither fnPopulateForm...
        ctrl.cancelAdd = function() {
            if(ctrl.items.length > 0) {
                $log.info($scope.items[0]);
                ctrl.fnPopulateForm(ctrl.items[0]);
            }
        }
    }],

And in view, use the default controller binding i.e $ctrl

<div class="general-form">
    <input type="hidden" name="id" ng-model="$ctrl.objectId">
    <label>Name:</label>
    <br>
    <input class="form-control" name="name" placeholder="Name" ng-model="$ctrl.objectName">
    <br>
</div>

You can also change $ctrl into whatever you want in a controllerAs declaration of the component, i.e.

app.component("bdObjects", {
    templateUrl: "app/templates/components/BusinessObjects.html",
    controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
        function ($scope, $http, $log, API_ROOT, VisDataSet) {
          //...
    }],
    controllerAs: 'bd', 
    bindings: {
        //...
    }
});

and in the view:

Prashanth VG On 17 December 2016 at 09:45

Hey check this JS fiddle

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 <body>
<div ng-app="myApp" ng-controller="namesCtrl">
  <input type="hidden" name="id" ng-model="objectId">
  <label>Name:</label>
  <br>
  <input class="form-control" name="name" placeholder="Name" ng-model="objectName">
  <br>
  <button ng-click="fnAdd()">
    button
  </button>
</div>
<script>
  angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.fnAdd = function() {
      $scope.objectId = "";
      $scope.objectName = "Test Object";
      console.log($scope.objectName);
    }


    $scope.cancelAdd = function() {
      if ($scope.items.length > 0) {
        $log.info($scope.items[0]);
        $scope.fnPopulateForm($scope.items[0]);
      }
    }

  });

</script>

**Khilen Maniyar** · Accepted Answer · 2017-11-30 11:38:19

I tried with $timeout() and it got working.

TechQA.

Component binding not working : Angularjs

There are 3 answers

Related Questions in ANGULARJS

Related Questions in BINDING

Related Questions in COMPONENTS

Related Questions in TWO-WAY

Popular Questions

Popular Tags

Trending Questions