jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

jQWidgets-AngularJS issue using ng-include Posts

March 9, 2016 at 2:28 am jQWidgets-AngularJS issue using ng-include #82240

Participant

Hi,

The problem occurs while i use ng-include to seperate out the HTML portion in the index page. The screen goes blank.
(The same code works fine when the HTML ((testForm.html) portion is part of index page (index.html)).

I have pasted the code below.

Thanks,
Keshavan

authApp.js

(function () {
   angular.module("authApp", ["jqwidgets", "firebase"]);
}())

authController.js

(function () {
        authController = function ($scope, $firebaseAuth, service, validate) {
            $scope.authData = null;
            $scope.error = null;
            $scope.email = null;
            $scope.password = null;
            var ref = new Firebase("https://flickering-torch-6953.firebaseio.com");
            $scope.authObj = $firebaseAuth(ref);
            $scope.authView = "testForm.html";
            $scope.validatorSettings = {
                    hintType: 'label',
                    animationDuration: 0,
                    rules: [
                        {
                            input: '#passwordInput',
                            message: 'Password is required!',
                            action: 'keyup, blur',
                            rule: 'required'
                                                                        },
                        {
                            input: '#passwordInput',
                            message: 'Your password must be between 4 and 12 characters!',
                            action: 'keyup, blur',
                            rule: 'length=4,12'
                                                                        },
                        {
                            input: '#emailInput',
                            message: 'E-mail is required!',
                            action: 'keyup, blur',
                            rule: 'required'
                                                                        },
                        {
                            input: '#emailInput',
                            message: 'Invalid e-mail!',
                            action: 'keyup',
                            rule: 'email'
                                             }
                                                                ]
                } 
            $scope.validate = function () {
                    $scope.validatorSettings.$apply('validate');
                }
            $scope.validate();
            $scope.login = function () {
               login($scope,  ref);
            };

        }
        angular.module('authApp').controller('authController', ['$scope', '$firebaseAuth', authController]);
    }())

index.html

<!DOCTYPE html>
<html ng-app="authApp">
<head>
    <title id="Description">jqxInput directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/angular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxpasswordinput.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/authApp.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/authController.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/register.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/logIn.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/logOut.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
</head>
    <body>
        <div ng-controller = "authController">
            <div ng-include="authView"></div>
        </div>
    </body>
</html>

testForm.html

<div ng-app="authApp">
    <jqx-input ng-model="email" jqx-width="200" jqx-height="25" id="emailInput" placeholder="'Enter your eMail Id'"> </jqx-input>{{email}}
    <br />
    <br />
    <jqx-password-input ng-model="password" jqx-width="200" jqx-height="25" type="password" placeholder="'Enter your Password'" id="passwordInput"></jqx-password-input>
    <br />
    <jqx-toggle-button jqx-settings="settings" ng-click="register()">register</jqx-toggle-button>
    <jqx-toggle-button jqx-settings="settings" ng-click="logIn()">logIn</jqx-toggle-button>
    <jqx-toggle-button jqx-settings="settings" ng-click="logOut()">logOut</jqx-toggle-button>
</div>
<div ng-if="error" <strong> error !! {{error}}</strong>></div>
<div ng-if="authData" <strong> success !! UID : {{ authData.uid }}</strong>></div>

(function (){   
        logIn = function ($scope,ref) 
        {
            ref.authWithPassword
            ({
                "email": $scope.email,
                "password": $scope.password
            }, function (error, authData) {
                if (error) {
                    alert(error);
                    console.log("Login Failed ! ", error);
                    } else {
                        $scope.authData = authData;
                        alert("Authenticated successfully - UID : " + authData.uid);
                        console.log("Authenticated successfully with payload:", authData);
                    }
                });
        }
angular.module('authApp').service('service', logIn);
}());

March 9, 2016 at 2:59 am jQWidgets-AngularJS issue using ng-include #82241

Keshavan

Participant

Hi,

The path to external HTML file (testForm.html) is also CORRECT.

Thanks,
Keshavan

March 9, 2016 at 6:15 am jQWidgets-AngularJS issue using ng-include #82245

Keshavan

Participant

Hi,

jQWidgets ver 4.0.

I am copying Google chrome console error,

angular.js:12477 TypeError: $scope.validatorSettings.$apply is not a function
    at Scope.$scope.validate (authController.js:41)
    at new authController (authController.js:43)
    at Object.invoke (angular.js:4478)
    at extend.instance (angular.js:9136)
    at nodeLinkFn (angular.js:8248)
    at compositeLinkFn (angular.js:7680)
    at compositeLinkFn (angular.js:7684)
    at compositeLinkFn (angular.js:7684)
    at publicLinkFn (angular.js:7555)
    at angular.js:1662

Thanks,
Keshavan

March 9, 2016 at 10:23 am jQWidgets-AngularJS issue using ng-include #82259

Peter Stoev

Keymaster

Hi Keshavan,

The issue here is that you think that $apply should be defined, but it should not be, because validatorSettings is a custom object. I am sorry, but this is not a jQWidgets issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.