KUIB two way binding - Forum - Kendo UI Builder - Progress Community
 Forum

KUIB two way binding

This question is answered

Hello,

I am trying to do simple two way binding in a blank view but am unable to get it to work.

In my blank view's controller.public.js I have:

class MyTestsTestCtrl extends BaseController {
    constructor($scope, $injector, stateData) {
        super($scope, $injector);

        $scope.name = "John";
        $scope.myFunction = function(){
            console.log($scope.name);
        }

    }



In the topSection.html I have:

{{name}}
<input type="text" ng-model="name">
<button ng-click="myFunction()">click me to view console</button>

When I change the name in the input it is not being reflected in the $scope.name variable. However, when not using KUIB I can do two way binding like this and it works as expected:


<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        {{name}}
        <input ng-model="name">
        <button ng-click="myFunction()">click me to view console</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.name = "John";
            $scope.myFunction = function () {
                console.log($scope.name);
            }
        });




    </script>
</body>

</html>

Am I missing something on the KUIB side to make it work?

Verified Answer
  • Hi,

    All members of the controller (variable and functions) are available in the custom sections via the 'vm' object which is the controller 'this' object. In order to have two way binding in the custom section you need to modify your code as following

    {{vm.name}}
    <input ng-model="vm.name">
    <button ng-click="vm.myFunction()">click me to view console</button>

    this.name = "John";
    this.myFunction = function () {
       console.log($scope.name);
    }

    Best,

    Rado

All Replies
  • Hi,

    All members of the controller (variable and functions) are available in the custom sections via the 'vm' object which is the controller 'this' object. In order to have two way binding in the custom section you need to modify your code as following

    {{vm.name}}
    <input ng-model="vm.name">
    <button ng-click="vm.myFunction()">click me to view console</button>

    this.name = "John";
    this.myFunction = function () {
       console.log($scope.name);
    }

    Best,

    Rado

  • Thank you!