)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: General |
Published Date: October 27, 2015 |
Last Revised Date: May 10, 2019
Tags: general, angular

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

HTML

<body ng-controller="EditorsCtrl">

    <table>

        <tbody>

            <tr>

                <td>

                    <span>Numeric Textbox</span>

                    <input class="numeric" type="text" ej-numerictextbox e-value="column['@length']" />

                    <span>Value</span>

                    <input type="text" class="input ejinputtext" ng-model="column['@length']" /><br />

                </td>

            </tr>

        </tbody>

    </table>

</body>

 

JavaScript

<script type="text/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

<body ng-controller="EditorsCtrl">

<h3>Numeric TextBox</h3>

                    <input class="numeric" type="text" ng-init="column={};column['@length'] = ''" ej-numerictextbox e-value="column['@length']" /><br />

</body>

 

Sample Links:

ngInit

https://docs.angularjs.org/api/ng/directive/ngInit

http://www.w3schools.com/angular/angular_directives.asp

Angular support:

http://docs.syncfusion.com/js/angularjs

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon