How to declare the $scope variable before binding to our components properties?

2 mins read

Normally, a variable with Angular $scope must be declared before binding it to the components property, as shown in the following code example.

HTML

<table>

<tbody>

<tr>

<td>

<span>Numeric Textbox</span>

<span>Value</span>

</td>

</tr>

</tbody>

</table>

</body>

JavaScript

angular.module('EditCtrl', ['ejangular'])

.controller('EditorsCtrl', function ($scope) {

$scope.column = {};

$scope.column['@length'] = '50';

});

</script>

The variable column[@length] is declared in the script section before it is bound to the value property of the NumericTextBox component. On rendering, NumericTextBox displays the value 50. In case, variable column[@length] is not declared, then script error is thrown.

Script error is not thrown in all cases, but only for complex variables (object type like ‘column[@length]’). For normal variables, it is considered a string value.

Sometimes, there may be scenarios where you cannot declare the variables initially. You may create the HTML element at run time or assign values to the properties at run time. In such cases, error may be thrown when the complex variable (object type) is not declared previously. This error can be avoided by using the ngInit directive in the AngularJS. At run time, make use of this directive when you are unable to declare the $scope variable in advance. The ngInit directive allows you to evaluate an expression in the current scope. The following code shows how to declare a variable by using ngInit.

HTML

<h3>Numeric TextBox</h3>