发表于: 2017-07-10 21:26:21

1 914


今天完成的事情:

找精英页面完成,关于我们页面完成。

竖向轮播那里的接口有问题,需求是显示最新认证的公司发布的职位,现在还没解决,主要是按照接口文档传过去的参数并没有返回对应的数据。

然后写的过程中看了下controller as的用法:

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

            controller:              

                function ACtrl($scope) {

                    $scope.test = "一个例子"; //在$scope对象中加入test

                }

            html:

                <div ng-controller="ACtrl">

                    {{test}}

                </div>

        2) this 则采用了controller as(需要版本为ng 1.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 中的变量或数据对象我们可以全部拿到,并且上级控制器中的变量也可以在下级控制器中被获取到:

            controller:

                function ParentCtrl($scope) {

                    $scope.test = "测试";

                    

                    $scope.cover ="覆盖测试";

                }

                function ChildCtrl($scope) {

                    $scope.cover ="子覆盖测试";

                    var test = $scope.test; //“测试”

                }

            html:

                <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 中的变量则只适用于当前控制器:

            controller:

                function ParentCtrl($scope) {

                    var vm = this;

                    

                    vm.test = "测试";

                    vm.cover ="覆盖测试";

                }

                function ChildCtrl($scope) {

                    var vm = this;

                    

                    vm.cover ="子覆盖测试";

                }

            html:

                <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中只可以拿到当前控制器下声明的变量。

对象对比:

        controller:

            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来处理吧。


明天计划的事情:

把样式稍微写写,太丑了,不忍直视,然后开始推荐职位和最新职位的搜索页

遇到的问题:

竖向轮播还没解决,我用的是angular.ui.bootstrap,API文档里并没有关于轮播反向的方法,我感觉应该是css控制的

收获:

$scope和this的详细知识,之前只是会用。


返回列表 返回列表
评论

    分享到