Thursday 5 November 2015

multiple controller in single ng-app in AngularJs Example 


       
<html>

<head>
    <title>Multiple ng-controller in single ng-app in angularJs</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <script>

    var myapp = angular.module("myapp", [])
    .controller("firstcontroller", function ($scope) {

        $scope.$watch('firstcontroller.firstname', function () { alert(1); });

    })

    .controller("2ndcontroller", function ($scope) {
    })
    ;


    var fullname = {
        firstname: '',
        lastname: ''
    };


    function changename() {
        var fullscope = angular.element(document.querySelector('#fullname')).scope();
        fullscope.$apply(function () {
            fullscope.name = fullname.firstname + ' ' + fullname.lastname;
        });
    }

    </script>






</head>

<body>

    <div id="div1" ng-app="myapp" >
        <div ng-controller="firstcontroller">
            <input type="text" name="fname" ng-model="firstname" onkeyup="fullname.firstname= this.value; changename()">
        </div> 


        <div ng-controller="2ndcontroller">
            <input type="text" name="lname" ng-model="lastname" onkeyup="fullname.lastname= this.value; changename()">
        </div>


        <div id="fullname">Full name : {{name}}</div>
    </div>

     



     



</body>
</html>