Angular Js Controller

The controller in the application is defined in Angularjs with the ng-controller directive, for example:

<DivNg-app= "MYAPP"Ng-controller= "Myctrl">Surname:<inputtype= "text"Ng-model= "FirstName"><BR>Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Name: {{firstName + "" + LastName}}</Div>

<script>var app = Angular.module (' myApp ', []); App.controller (function($scope) {    = "John";     = "Doe";}); </script>

In a controller, you can define methods and properties, and a page can have multiple controllers, and the controller can be nested. For example:

<HTMLNg-app= "MYAPP">    <Head>        <MetaCharSet= "Utf-8">    </Head>    <Body>        <DivNg-controller= "Commoncontroller">            <DivNg-controller= "Controller1">                <P>{{Greeting.text}},angular</P>                <ButtonNg-click= "test1 ()">Test1</Button>            </Div>            <DivNg-controller= "Controller2">                <P>{{Greeting.text}},angular</P>                <ButtonNg-click= "test2 ()">Test2</Button>                <ButtonNg-click= "Commonfn ()">General</Button>            </Div>        </Div>    </Body>    <Scriptsrc= "Js/angular-1.3.0.js"></Script></HTML>

Controller Commoncontroller defines the CONTROLLER1 and controller Controller2,controller1,controller2 can invoke its own defined methods and properties, if not present, You can also call methods and properties in Commoncontroller, so you can define public definitions in Commoncontrolle

varApp=angular.module ("myApp",[]); App.controller ("Commoncontroller",function($scope) {$scope. COMMONFN=function() {alert ("This is universal."); } $scope. Greeting={text:"Common"}}) App.controller ("Controller1",function($scope) {$scope. Greeting={text:"Test11"           }; $scope. Test1=function() {alert ("This is the Test1 method.");      }      }); App.controller ("Controller2",function($scope) {//$scope. greeting={              //text: "test22"              // };$scope. test2=function() {alert ("This is test2."); }      });

The difference between $emit and $broadcast

$emit can only propagate events to itself and to the parent;

$broadcast can only propagate events to itself and to child nodes;

For example:

<!DOCTYPE HTML><HTMLNg-app= "MYAPP">    <Head>        <MetaCharSet= "Utf-8">        <Linkrel= "stylesheet"type= "Text/css"href= "Scope1.css" />    </Head>    <Body>        <DivNg-controller= "Eventcontroller">Root Scope<TT>MyEvent</TT>Count: {{count}}<ul>                <Ling-repeat= "I in [1]"Ng-controller= "Eventcontroller">                    <ButtonNg-click= "$emit (' MyEvent ')">$emit (' MyEvent ')</Button>                    <ButtonNg-click= "$broadcast (' MyEvent ')">$broadcast (' MyEvent ')</Button>                    <BR>Middle Scope<TT>MyEvent</TT>Count: {{count}}<ul>                        <Ling-repeat= "item in [1, 2]"Ng-controller= "Eventcontroller">Leaf Scope<TT>MyEvent</TT>Count: {{count}}</Li>                    </ul>                </Li>            </ul>        </Div>    </Body>    <Scriptsrc= "Js/angular-1.3.0.js"></Script>    <Scripttype= "Text/javascript">       //function Eventcontroller ($scope) {       //$scope. count=0;       //$scope. $on ("MyEvent", function () {       //$scope. count++;       //      })       // }       varapp=Angular.module ("myApp",[]); App.controller ("Eventcontroller",function($scope) {$scope. Count=0; $scope. $on ("MyEvent",function() {$scope. Count++;       });    }); </Script></HTML>

Angular Js Controller