Angular.js – Wie kann man $sope in Angular besser verstehen?

Question

Ich habe mich in letzter Zeit mit Angular beschäftigt, weil ich das Gefühl habe, dass ein neues Projekt viel unklarer ist als Vue.
Veröffentlichen Sie einen Code und bitten Sie um Rat.

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 ;
                        }

Answer 1

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

Answer 2

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

Answer 3

Angular系列学习笔记（一）—— 聊聊angular的模块化

Answer 4

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

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

复杂一点说，我的理解是，$scope 是一个基于 $rootScope 的实例。scope 这个单词本身就有作用域的意思，Angular 中的 $scope 同样存在 JavaScript 中作用域的特点，或者说存在继承的特点。

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

对于父级访问子级，在 JavaScript 中的解决方案一般有两种，一是通过全局变量，二是通过闭包的写法把自己作用域的某一个值暴露出来。在 Angular 中，方法类似，一是通过 $rootScope；二是通过 $emit 由事件去控制；三是通过 factory 或者 service 还有 constant 之类的传参，但这个方法还涉及到依赖注入之类的事儿。

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

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

这里能说到的很有限，推荐看下官方文档，请一定要仔细看：
https://docs.angularjs.org/gu...
https://github.com/angular/an...

如果你要写 custom directive（自定义指令），那么不理解 $scope 是很难写好的。

以上纯粹是个人理解，欢迎指正