angular.js - How to better understand $sope in angular?

Question

I have been studying angular recently because it is a new project and it feels much more obscure than vue
Post a piece of code and ask for guidance

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

Think of it as the link between the view and the controller.

Answer 2

Since you can understand vue, let me make an inappropriate comparison for you. There is a data() function and methods object in vue. The properties and methods they return can be used directly in the template. The same is true in angular, in scope Methods and properties on the object can be used directly in the template.

Answer 3

Angular series study notes (1) - Let’s talk about the modularization of angular

Answer 4

Simply put, I agree with what was said above, it can be understood as the link between the view and the controller.

Practically speaking, for data-driven frameworks, page (view) changes are based on data changes. This $scope is generally used to store page data. Of course, the function is not limited to storing data visible on the page, but can also store some data that does not need to be displayed, but will allow "other things to happen".

To be more complicated, my understanding is that $scope is an instance based on $rootScope. The word scope itself means scope. $scope in Angular also has the characteristics of scope in JavaScript, or the characteristics of inheritance.

For example, in JavaScript, child functions can access the scope of the parent function through variable names, but the parent cannot access the child. Similarly, in Angular, the child controller can access the $scope of the parent controller through $parent, but the parent cannot access the child.

For parents to access children, there are generally two solutions in JavaScript. One is through global variables, and the other is through closure writing to expose a certain value in its own scope. In Angular, the methods are similar, one is through $rootScope; the other is controlled by events through $emit; the third is through factory or service and there are parameters such as constant, but this Methods also involve things like dependency injection.

In the long run, $scope is not a good thing [Dense fog. . . My personal experience is that if you don't pay attention, it is likely to cause scope bleeding, which means that a certain value should not be obtained in the child level, but due to the inheritance relationship, the child level searches up one level and finds this value. . It looks great, but it's likely to go wrong in operation, and it's harder to debug.

You can learn about the controllerAs syntax so that you don’t need to use $scope in Angular 1. In Angular 2, $scope is definitely not used.

What can be said here is very limited. It is recommended to read the official documents. Please be sure to read them carefully:
https://docs.angularjs.org/gu...
https://github.com/angular/an... .

If you want to write a custom directive, it is difficult to write it well without understanding $scope.

The above is purely personal understanding, welcome to correct me