angular.js - Bagaimana untuk lebih memahami $sope dalam sudut?

Question

Saya telah mengkaji sudut baru-baru ini kerana rasanya projek baharu jauh lebih kabur daripada vue
Siarkan sekeping kod dan minta nasihat

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

Anggap ia sebagai pautan antara paparan dan pengawal.

Answer 2

Memandangkan anda boleh memahami vue, izinkan saya membuat perbandingan yang tidak sesuai untuk anda. Terdapat fungsi data() dan objek kaedah dalam vue. dalam skop Kaedah dan sifat pada objek boleh digunakan secara langsung dalam templat.

Answer 3

Nota kajian siri sudut (1) - Mari kita bincangkan tentang kemodularan sudut

Answer 4

Ringkasnya, saya bersetuju dengan apa yang dinyatakan di atas, ia boleh difahami sebagai penghubung antara pandangan dan pengawal.

Secara praktikal, untuk rangka kerja dipacu data, perubahan halaman (pandangan) adalah berdasarkan perubahan data Ini $scope biasanya digunakan untuk menyimpan data halaman. Sudah tentu, fungsi ini tidak terhad kepada menyimpan data yang boleh dilihat pada halaman, tetapi juga boleh menyimpan beberapa data yang tidak perlu dipaparkan, tetapi akan membenarkan "perkara lain berlaku".

Untuk menjadi lebih rumit, pemahaman saya ialah $scope 是一个基于 $rootScope 的实例。scope 这个单词本身就有作用域的意思，Angular 中的 $scope ialah contoh berdasarkan $rootScope. Perkataan skop itu sendiri bermaksud skop

dalam Angular juga mempunyai ciri-ciri skop dalam JavaScript, atau ciri-ciri warisan.

controller 可以通过 $parent 访问父级 controller 的 $scopeSebagai contoh, dalam JavaScript, fungsi anak boleh mengakses skop fungsi induk melalui nama berubah, tetapi ibu bapa tidak boleh mengakses anak tersebut. Begitu juga, dalam Angular, controller anak boleh mengakses controller

ibu bapa melalui $parent, tetapi ibu bapa tidak boleh mengakses anak tersebut.

$rootScope；二是通过 $emit 由事件去控制；三是通过 factory 或者 service 还有 constantUntuk ibu bapa mengakses kanak-kanak, biasanya terdapat dua penyelesaian dalam JavaScript Satu adalah melalui pembolehubah global, dan satu lagi adalah melalui penulisan penutupan untuk mendedahkan nilai tertentu dalam skopnya sendiri. Dalam Angular, kaedahnya adalah serupa Salah satunya adalah untuk lulus parameter seperti

, tetapi kaedah ini juga melibatkan perkara seperti suntikan pergantungan.

$scopeDalam jangka masa panjang,

bukanlah perkara yang baik [kabus tebal. . . Pengalaman peribadi saya ialah jika anda tidak memberi perhatian, ia berkemungkinan menyebabkan pendarahan skop, yang bermaksud bahawa nilai tertentu tidak sepatutnya diperoleh dalam peringkat kanak-kanak, tetapi disebabkan oleh hubungan pewarisan, peringkat kanak-kanak akan mencari satu. tahap dan cari nilai ini. Ia kelihatan hebat, tetapi masalah mungkin berlaku semasa operasi, dan ia sukar untuk dinyahpepijat.

controllerAs 语法，这样你就不需要在 Angular 1 中用 $scope 了。在 Angular 2 中是肯定不用 $scopeAnda boleh belajar tentang sintaks controllerAs supaya anda tidak perlu menggunakan

dalam Angular 1. Dalam Angular 2,

pasti tidak digunakan.

Apa yang boleh dikatakan di sini adalah sangat terhad. Adalah disyorkan untuk membaca dokumentasi rasmi Sila pastikan anda membacanya dengan teliti:

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

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

Jika anda ingin menulis arahan tersuai, sukar untuk menulisnya dengan baik tanpa memahami

.

Di atas adalah pemahaman peribadi semata-mata, dialu-alukan untuk membetulkan saya🎜🎜