1. 自定义标签

<hello>Hello, Angular.</hello>

    <script>

        var myModule = angular.module("myModule", []);

        myModule.directive("hello", function(){

            return {

                restrict: 'E',

                template: "<div></div>",

                replace:true

            }

        });

    </script>

2. 多个控制器

<div ng-controller="CommonController">

        <button ng-click="commonFn()">common</button>

    </div>

    <div ng-controller="Controller1">

        <p>{

{greeting.text}}, Angular.</p>

        <button ng-click="control1()">controller1</button>

    </div>

<script src="js/Angular.js"></script>

    <script>

        var app = angular.module("myApp", []);

        app.controller("CommonController", function($scope){

            $scope.commonFn = function(){

                alert("common");

            };

        });

        app.controller("Controller1", function($scope){

            $scope.greeting = {

                text:"Hello"

            };

            $scope.control1 = function(){

                alert("Controller1");

            }

        });

    </script>

// 多控制器的另一种实现方式

<div ng-controller="CommonController">

        <button ng-click="commonFn()">common</button>

    </div>

    <div ng-controller="OneController">

        <p>{

{greeting.txt}}, Angular.</p>

        <button ng-click="one()">Button</button>

    </div>

<script src="js/angular-1.3.0.js"></script>

    <script>

        function CommonController($scope){

            $scope.commonFn = function(){

                alert("common");

            };

        }

        function OneController($scope){

            $scope.greeting = { txt:"Hi" };

            $scope.one = function(){

                alert("OneController");

            };

        }

    </script>

3. rootScope

<div>

        <div ng-controller="GreetCtrl">

            Hello, {

{name}}

        </div>

        <div ng-controller="ListCtrl">

            <ol>

                <li ng-repeat="x in names">name: {

{x.name}},  country: {

{x.country}}, hobby: {

{hobby}}</li>

            </ol>

        </div>

    </div>

    <script src="js/angular-1.3.0.js"></script>

    <script>

    function GreetCtrl($scope, $rootScope){

        $scope.name = "Angular.Angular";

        $rootScope.hobby = "Angular";

    }

    function ListCtrl($scope){

        $scope.names = [{name:"Ting", country:"Shanghai"},{name:"Juan", country:"Nanjing"}];

    }

    </script>

4. emit, boardcast

<div ng-controller="EventController">

        Root scope

        <tt>MyEvent</tt> count: {

{count}}

        <ul>

            <li ng-repeat="i in [1]" ng-controller="EventController">

                <button ng-click="$emit('MyEvent')">emit</button>

                <button ng-click="$broadcast('MyEvent')">boardcast</button>

                <br>

                Middle scope

                <tt>MyEvent</tt> count: {

{count}}

                <ul>

                    <li ng-repeat="item in [1, 2]" ng-controller="EventController">

                        Leaf scope

                        <tt>Event</tt> count: {

{count}}

                    </li>

                </ul>

            </li>

        </ul>

    </div>

    <script src="js/angular-1.3.0.js"></script>

    <script>

    function EventController($scope){

        $scope.count = 0;

        $scope.$on("MyEvent", function(){

            $scope.count++;

        });

    }

    </script>