web -- Angularjs 笔记

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>