angular.js - 如何更好的理解angular裡面的$sope？

Question

最近一直在研究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 ;
                        }

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方法也涉及到依賴注入之類的事兒。 長遠一點說，

$scope

不是啥好東西【大霧。 。 。個人的體會是，如果不注意，就很可能會造成scope bleeding，也就是本來某一個值在子級中不該獲取到，但由於繼承關係，子級一級一級向上找，找到了這個值。看起來很棒，但在運行中很可能會出問題，而且比較難調試出來。 可以去了解一下

controllerAs

語法，這樣你就不需要在 Angular 1 中用 $scope 了。在 Angular 2 中是肯定不用 $scope 的。 這裡能說到的很有限，推薦看下官方文檔，請一定要仔細看：

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

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

如果你要寫 custom directive（自訂指令），那麼不理解

$scope

是很難寫好的。

以上純粹是個人理解，歡迎指正