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?
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
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!