zoukankan      html  css  js  c++  java
  • Angular Js 控制器

    在Angularjs中用ng-controller指令定义了应用程序中的控制器;例如:

    <div ng-app="myApp" ng-controller="myCtrl">
    姓: <input type="text" ng-model="firstName"><br>
    名: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    </script>

    在控制器中,可以定义方法和属性,而且一个页面可以有多个控制器,并且控制器是可以嵌套的。例如:

    <html ng-app="myApp">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div ng-controller="CommonController">
                <div ng-controller="Controller1">
                    <p>{{greeting.text}},Angular</p>
                    <button ng-click="test1()">test1</button>
                </div>
                <div ng-controller="Controller2">
                    <p>{{greeting.text}},Angular</p>
                    <button ng-click="test2()">test2</button>
                    <button ng-click="commonFn()">通用</button>
                </div>
            </div>
        </body>
        <script src="js/angular-1.3.0.js"></script>
    </html>
    控制器CommonController中定义了Controller1和控制器Controller2,Controller1,Controller2可以调用自己定义的方法和属性,如果不存在,则也可以调用CommonController中的方法和属性;所以可以把公共的定义在CommonControlle中
    var app=angular.module("myApp",[]);
          app.controller("CommonController",function($scope){
                 $scope.commonFn=function(){
                      alert("这是通用的");
                 }
                 $scope.greeting={
                       text:"common"
                 }
          })
    
          app.controller("Controller1",function($scope){
               $scope.greeting={
                     text:"test11"
               };
               $scope.test1=function(){
                     alert("这是test1方法");
               }
          });
    
          app.controller("Controller2",function($scope){
                  // $scope.greeting={
                  //     text:"test22"
                  // };
                  $scope.test2=function(){
                      alert("这是test2");
                  }
          });

     $emit和$broadcast的区别

    $emit 只可以向自身以及父级传播事件;

    $broadcast 只可以向自身以及子节点传播事件;

    例如:

    <!doctype html>
    <html ng-app="myApp">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="Scope1.css" />
        </head>
        <body>
            <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('MyEvent')
                        </button>
                        <button ng-click="$broadcast('MyEvent')">
                            $broadcast('MyEvent')
                        </button>
                        <br>
                        Middle scope
                        <tt>MyEvent</tt> count: {{count}}
                        <ul>
                            <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                                Leaf scope
                                <tt>MyEvent</tt> count: {{count}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </body>
        <script src="js/angular-1.3.0.js"></script>
        <script type="text/javascript">
           // function EventController($scope){
           //         $scope.count=0;
           //      $scope.$on("MyEvent",function(){
           //          $scope.count++;
           //      })
           // }
           var app=angular.module("myApp",[]);
           app.controller("EventController",function($scope){
                  $scope.count=0;
                  $scope.$on("MyEvent",function(){
                        $scope.count++;
                  });
           });
        </script>
    </html>
  • 相关阅读:
    javasscript学习笔记 之 数组学习二 数组的所有方法
    JavaScript学习笔记之 数组方法一 堆栈 和队列
    JavaScript学习笔记:检测数组方法
    _bzoj1500 [NOI2005]维修数列【真·Splay】
    _bzoj1012 [JSOI2008]最大数maxnumber【Fenwick Tree】
    _bzoj1010 [HNOI2008]玩具装箱toy【斜率优化dp】
    _bzoj3224 Tyvj 1728 普通平衡树【Splay】
    _bzoj2002 [Hnoi2010]Bounce 弹飞绵羊【分块】
    _bzoj1001 [BeiJing2006]狼抓兔子【平面图】
    _bzoj1036 [ZJOI2008]树的统计Count【树链剖分】
  • 原文地址:https://www.cnblogs.com/alice626/p/5272432.html
Copyright © 2011-2022 走看看