AngularJS 控制器(controller)

// angular.module(module[,dependes]) 创建或获取模块
//moduleName : 模块名称 string
//depends : 依赖的其他模块Array
//当只传入一个名称时,代表获取指定的模块
//两个参数时,定义模块,即使不依赖其他模块, 也要传入一个空的数组

<script>
//最简单最基础的定要以一个控制器
var app = angular.module("myApp",[]);
        //推断式注入
        app.controller("myController",function($scope){ 
          //定义一个控制器"myController"
            $scope.name = "sang"
        });
        //声明式注入
        //建议一律使用声明式 代码压缩混淆后依然能正常使用
        //数组的0到倒数第二项 都是该控制器需要注入的模块 
        //最后一项为回调函数
</script>

主要是要表示作用域的问题

<body ng-controller="mainController">
 
        <div ng-controller="myController">
            {{name}}--{{age}}--{{main}}--{{address}}
                //打印 sang--30--hello Angular!!!--beijing
        </div>
        <div ng-controller="myController2">
            {{name}}--{{age}}{{main}}--{{address}}
                //打印  tom--hello Angular!!!--beijing
        </div>
        <div ng-init="address='beijing'">
            {{address}} //beijing
        </div>
        {{name}}--{{main}}--{{address}}  //--hello Angular!!!--beijing
    </body>
    <script>
        var app = angular.module("myApp",[])
        app.controller("myController",["$scope",function($scope){
            $scope.name = "sang";
            $scope.age = 30;
        }])
        app.controller("myController2",["$scope",function($scope){
            $scope.name = "tom";
        }])
        app.controller("mainController",["$scope",function($scope){
            $scope.main = "hello Angular!!!";
        }])
        // $rootScope 在声明ng-app的位置创建此作用域
        //一个angular 应用有且只有一个跟作用域

        //同级的作用域不可相互访问
    </script>```
####父子作用域问题

<body ng-controller="mainController">

    <input type="text" name="" value="" ng-model="pmsg">
    <div ng-controller="myController">
        <input type="text" name="" ng-model="pmsg">
       这是父亲的值: {{ pmsg }}
       <p ng-repeat="item in items">{{item.name+"-"+item.price}}</p>
       <button ng-click="clickEvent($event)">点击</button>
    </div>
</body>
<script>
    var app = angular.module("myApp",[])
    app.controller("myController",["$scope",function($scope){
        $scope.cmsg="";
        $scope.items=[{
            name:"iphone",
            price:5000
        },{
            name:"mi4",
            price:2000
        }];
        $scope.clickEvent = function(e){
            console.log("点击触发",e);
            $scope.items.push({
                name:"新手机",
                price:998
            })

        }
    }]);
    app.controller("mainController",["$scope",function($scope){
        $scope.pmsg=""
    }])
    // 子级作用域可以访问使用父级作用域的值,但无权修改
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1)不复用Controller,一个控制器一般只负责一小块视图 2)不要在Controller中操作DOM,非其职...
    c05436bafae5阅读 2,854评论 0 0
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 6,857评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,107评论 19 139
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 5,208评论 0 10
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    秀才JaneBook阅读 5,426评论 0 22

友情链接更多精彩内容