Angular Js 控制器

Posted 2020-06-22 改变需要勇气，习惯需要坚持。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于Angular Js 控制器的主要内容，如果未能解决你的问题，请参考以下文章

json 可视代码工作室Angular with Firebase片段

HTTP转换为null什么意思？

typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming