美文网首页
AngularJS 控制器(controller)

AngularJS 控制器(controller)

作者: what__ | 来源:发表于2017-07-22 20:29 被阅读0次

    // 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=""
        }])
        // 子级作用域可以访问使用父级作用域的值,但无权修改
    

    相关文章

      网友评论

          本文标题:AngularJS 控制器(controller)

          本文链接:https://www.haomeiwen.com/subject/dgojkxtx.html