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>
  • 相关阅读:
    点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)
    点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
    点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
    点滴积累【JS】---JS小功能(JS实现动态添加运动属性)
    什么是CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI?
    使用Mysql命令一次性备份多个数据库(所有数据库)
    一套设计模式教程
    HTTP认证方式
    利用CodeIgniter中的Email类发邮件
    【php】对PHPExcel一些简单的理解
  • 原文地址:https://www.cnblogs.com/alice626/p/5272432.html
Copyright © 2011-2022 走看看