美文网首页
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