AngularJS : this与$scope数通的暴露与通讯

controlleras”是Angular在1.2版本后新增的语法，我将从引用方式，作用范围，对象对比三个方面做两者的比较：

@H_301_16@

@H_301_16@ 引用方式：

@H_301_16@ 1)$scope只需要在注入中声明，后面就可以直接在附加数据对象：

@H_301_16@ controller:

                function ACtrl($scope) {
                    $scope.test = "一个例子"; //在$scope对象中加入test
                }

@H_301_16@ html:

                <div ng-controller="ACtrl">
                    {{test}}
                </div>

@H_301_16@ 2) this则采用了controlleras(需要版本为ng1.2+)写法：

@H_301_16@ controller:

                function BCtrl() {
                    var vm = this;
                    this.test = "一个例子"; //在this对象中加入test
                }

@H_301_16@ html:

                <!-- vm为自己为当前控制器作的一个简略记号，也可以写作 BCtrl as b,后面变量便可以在b中引出 如b.test -->
                <div ng-controller="BCtrl as vm">
                    {{vm.test}}
                </div>

@H_301_16@

@H_301_16@ 作用范围：

@H_301_16@ 1)$scope中的变量或数据对象我们可以全部拿到，并且上级控制器中的变量也可以在下级控制器中被获取到：

                function ParentCtrl($scope) {
                    $scope.test = "测试";
                    
                    $scope.cover ="覆盖测试";
                }
                function ChildCtrl($scope) {
                    $scope.cover ="子覆盖测试";
                    var test = $scope.test; //“测试”
                }

<div ng-controller="ParentCtrl"> <p>Parent-test : {{test}}</p> <p>Parent-cover : {{cover}}</p> <div ng-controller="ChildCtrl"> <p>Child-test : {{test}}</p> <p>Child-cover : {{cover}}</p> </div> </div>

function ParentCtrl($scope) { var vm = this; vm.test = "测试"; vm.cover ="覆盖测试"; } function ChildCtrl($scope) { var vm = this; vm.cover ="子覆盖测试"; }

<div ng-controller="ParentCtrl as parent"> <p>Parent-test : {{parent.test}}</p> <p>Parent-cover : {{parent.cover}}</p> <div ng-controller="ChildCtrl as child"> <p>Child-test : {{child.test}}</p> <p>Child-cover : {{child.cover}}</p> </div> <div ng-controller="ChildCtrl as parent"> <p>Child-test : {{parent.test}}</p> <p>Child-cover : {{parent.cover}}</p> </div> </div>

function CCtrl($scope) { var vm = this; $scope.logThisAndScope = function() { console.log(vm === $scope) } }

AngularJS : this与$scope数通的暴露与通讯

猜你在找的Angularjs相关文章