angular.js - 如何更好的理解angular里面的$sope?
天蓬老师
天蓬老师 2017-06-07 09:23:44
0
4
709

最近一直在研究angular 因为一个新项目的 感觉比vue晦涩多了
贴一段代码 求大神指点

define(['APP', 'LANG', 'deviceReady', 'deviceAPI', 'deviceModel'], function(APP, LANG) {
    'use strict';

    APP.controller('IndexController', ['title', '$scope', '$timeout', '$interval', '$translate',
        function(title, $scope, $timeout, $interval, $translate) {
            // 蒙版
            if(localStorage && 'true' != localStorage.getItem('device_fridge_initialLoad')){
                // $$(".modaltotal").css("height",($$("body").height()+50) +"px");
                $$(".modaltotal").css("height","600px");
                // 打开蒙版
                $scope.initialLoading = true;
            }
            $scope.closePopup = function(){
                // 关闭蒙版
                $timeout(function(){
                    $scope.initialLoading = false;
                },10);
                if(localStorage){
                    localStorage.setItem('device_fridge_initialLoad','true');

                }
            };
            // initValue
            $scope.wifiSwitch = false;
            $scope.isSwitch = false;
            $scope.refrigeratorTemperature = '-/-';
            $scope.freezerTemperature = '-/-';
            $scope.refrigeratorTargetTemperature = '-/-';
            $scope.refrigeratorTargetTemperature_Writeable = true;
            $scope.freezerTargetTemperature = '-/-';
            $scope.freezerTargetTemperature_Writeable = true;
            //Super—cool
            $scope.quickRefrigeratingMode = false;
            $scope.quickRefrigeratingMode_Writeable = true;
            //Super-Frz
            $scope.quickFreezingMode = false;
            $scope.quickFreezingMode_Writeable = true;
            //holiday
            $scope.holidayMode = false;
            $scope.holidayMode_Writeable = true;
            //fuzzy
            $scope.intelligenceMode = false;
            $scope.intelligenceMode_Writeable = true;
            $scope.runningStatus = '';
            $scope.alarmsInfo = '';
            $scope.alarmsArr = [];
            $scope.alarmsInfoNum = 0;

            //获取url参数
            var UrlGet = $$.getUrlParams(), FRIDGE = null, TempInterval = null;
            
            //设定语言包
            var langType = UrlGet.lang || '';
            for(var key in LANG){
                if(key == langType.toUpperCase()){
                    $translate.use(key);
                    break;
                }
            }
            
            //设置页面标签
            // window.setTitle(title);
            
            //设备准备就绪
            window.initDeviceReady(function(){
                
                //定义接口 
                FRIDGE = new DeviceAPI.createDevice(deviceParam.GLOBE_DEVICEID , UrlGet.devicemac, function(changeData){
                    $scope.refreshDeviceInfo(changeData);
                },function(initData){
                    //初始化接口
                    $scope.refreshDeviceInfo(initData);
                });
            });
            
            //
            $scope.refreshDeviceInfo = function(RefreshData){
                $timeout(function(RefreshData){
                    if(RefreshData.retCode === '00000'){
                        RefreshData = RefreshData.data;
                        //处理布尔类型
                        for(var key in RefreshData){
                            var __KEY__ = RefreshData[key];
                            if(__KEY__['class'] == 'boolean' && key != 'getAllAlarm'){
                                __KEY__['value'] = (__KEY__['value'] == 'true' || __KEY__['value'] == true)? true : false;
                            };
                        };
                        $scope.DeviceData = RefreshData;
                        //wifi
                        $scope.wifiSwitch = RefreshData.online.value;
                        //开机状态
                        $scope.isSwitch =  $scope.wifiSwitch;
                        if(!$scope.isSwitch){
                            $$('.ModalBlank.ModalBlankVisibleIn').tap().click();
                            if($$('.ModalWarnBox').length == 0){
                                $translate(['lang_deviceStatus','lang_wifiStatus_on','lang_wifiStatus_off']).then(function(translations) {
                                    debugger
                                    $$.warn(translations.lang_deviceStatus + (RefreshData.online.value?translations.lang_wifiStatus_on:translations.lang_wifiStatus_off));
                                });
                            }
                            return ;
                        }
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(4)
漂亮男人

看作视图与controller之间的纽带吧。

黄舟

既然你能理解vue,那给你做个不恰当的对比,vue里面有个data()函数,methods对象,他们返回的属性和方法能直接在模板中使用,同样的在angular 中,在scope对象上的方法和属性,可以在模板中直接使用。

巴扎黑

Angular系列学习笔记(一)—— 聊聊angular的模块化

Peter_Zhu

简单来说,同意楼上说的,可以理解为视图(view)与控制器(controller)之间的纽带。

实际一点说,对于数据驱动框架,页面(视图)的改变都是基于数据改变的,这个 $scope 一般是用来存储页面数据的。当然功能不仅限于存储页面上可见的数据,还可以存储一些不需要展示,但会让“其他事情发生”的数据。

复杂一点说,我的理解是,$scope 是一个基于 $rootScope 的实例。scope 这个单词本身就有作用域的意思,Angular 中的 $scope 是一个基于 $rootScope 的实例。scope 这个单词本身就有作用域的意思,Angular 中的

同样存在 JavaScript 中作用域的特点,或者说存在继承的特点。

controller 可以通过 $parent 访问父级 controller$scope举个例子,JavaScript 中,子级函数可以通过变量名访问父级函数的作用域,但父级不能访问子级。同样,Angular 中,子级 controller 可以通过 $parent 访问父级 controller

,但父级不能访问子级。

$rootScope;二是通过 $emit 由事件去控制;三是通过 factory 或者 service 还有 constant对于父级访问子级,在 JavaScript 中的解决方案一般有两种,一是通过全局变量,二是通过闭包的写法把自己作用域的某一个值暴露出来。在 Angular 中,方法类似,一是通过

之类的传参,但这个方法还涉及到依赖注入之类的事儿。

$scope长远一点说,

不是啥好东西【大雾。。。个人的体会是,如果不注意,就很可能会造成 scope bleeding,也就是本来某一个值在子级中不该获取到,但由于继承关系,子级一级一级向上找,找到了这个值。看起来很棒,但在运行中很可能会出问题,而且比较难调试出来。

controllerAs 语法,这样你就不需要在 Angular 1 中用 $scope 了。在 Angular 2 中是肯定不用 $scope可以去了解一下 controllerAs 语法,这样你就不需要在 Angular 1 中用

了。在 Angular 2 中是肯定不用

的。

这里能说到的很有限,推荐看下官方文档,请一定要仔细看:

https://docs.angularjs.org/gu...

https://github.com/angular/an...$scope

如果你要写 custom directive(自定义指令),那么不理解
是很难写好的。

以上纯粹是个人理解,欢迎指正🎜🎜
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板