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

前端之家收集整理的这篇文章主要介绍了AngularJS : this与$scope数通的暴露与通讯前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

引用方式:

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

controller:

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

html:

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

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

controller:

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

html:

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

作用范围:

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>    

我在父控制器ParentCtrl中声明的test变量并未在子控制器ChildCtrl中做声明,而在ChildCtrl作用范围内的Child-test中,test却输出测试基于此我再做了一次覆盖测试,检测结果显示,当父子控制器同时存在相同的变量时,父子控制器各自范围内的值不会被覆盖;

2) this中的变量则只适用于当前控制器:

                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>

在使用this的时候,各层级变量的命名空间是平行的状态,模板html中只可以拿到当前控制器下声明的变量。

对象对比:

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

vm与$scope实际上是不相等的,在console中我们可以看到

vm:Constructor;

$scope:$get.Scope.$new.Child;

而在$scope中又包含了一个变量vm:Constructor

实际结构是

        $scope: {
            ...,vm: Constructor,...
        }      

那么我们可以整理如下:

$scope当控制器在写法上形成父子级关系时子级没有的变量或方法父级会自动强加在子级身上,子级可以任意获取到当前父级的变量或方法,该种形式是不可逆的,即父级无法通过$scope获取到子级的任意变量或方法

this 则像一个独立的个体,所有东西都是由自己管理,也就不存在父子级变量混淆关系了。

数据共享该如何进行呢?数据业务逻辑我觉得还是交给更专业的service来处理吧。

两种方式其实在性能上并无优劣之分,只有代码习惯的选择。

这或许可以取决于我们观察的角度,其实可以理解为私用公用的区别!

猜你在找的Angularjs相关文章