angulaire.js - Comment mieux comprendre $sope en angulaire?

Question

J'ai étudié Angular récemment parce que j'ai l'impression qu'un nouveau projet est beaucoup plus obscur que vue
Publiez un morceau de code et demandez conseil

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

Considérez-le comme le lien entre la vue et le contrôleur.

Answer 2

Puisque vous comprenez vue, permettez-moi de faire une comparaison inappropriée pour vous. Il existe une fonction data() et un objet méthodes dans vue. Les propriétés et méthodes qu'elles renvoient peuvent être utilisées directement dans le modèle. dans angulaire. , les méthodes et propriétés de l'objet scope peuvent être utilisées directement dans le modèle.

Answer 3

Notes d'étude de la série Angular (1) - Parlons de la modularisation d'angular

Answer 4

Pour faire simple, je suis d'accord avec ce qui a été dit plus haut, cela peut être compris comme le lien entre la vue et le contrôleur.

En pratique, pour les frameworks basés sur les données, les modifications de page (vue) sont basées sur les modifications de données. Ce $scope est généralement utilisé pour stocker les données de page. Bien entendu, la fonction ne se limite pas au stockage des données visibles sur la page, mais peut également stocker certaines données qui n'ont pas besoin d'être affichées, mais qui permettront « à d'autres choses de se produire ».

Pour être plus compliqué, je crois comprendre que $scope 是一个基于 $rootScope 的实例。scope 这个单词本身就有作用域的意思，Angular 中的 $scope est une instance basée sur $rootScope. Le mot scope lui-même signifie scope.

en Angular a également les caractéristiques de scope en JavaScript, ou les caractéristiques d'héritage.

controller 可以通过 $parent 访问父级 controller 的 $scopePar exemple, en JavaScript, les fonctions enfants peuvent accéder à la portée de la fonction parent via des noms de variables, mais le parent ne peut pas accéder à l'enfant. De même, dans Angular, le contrôleur enfant peut accéder au

du contrôleur parent via $parent, mais le parent ne peut pas accéder au enfant. .

$rootScope；二是通过 $emit 由事件去控制；三是通过 factory 或者 service 还有 constantPour que les parents accèdent aux enfants, il existe généralement deux solutions en JavaScript. L'une consiste à utiliser des variables globales et l'autre à utiliser l'écriture de fermeture pour exposer une certaine valeur dans sa propre portée. Dans Angular, la méthode est similaire. La première consiste à transmettre des paramètres tels que

, mais cette méthode implique également des choses comme l'injection de dépendances.

$scopeÀ long terme,

n'est pas une bonne chose [épais brouillard. . . Mon expérience personnelle est que si vous n'y prêtez pas attention, cela risque de provoquer un saignement de la portée, ce qui signifie qu'une certaine valeur ne devrait pas être obtenue au niveau enfant, mais en raison de la relation d'héritage, le niveau enfant en recherchera une. niveau et trouver cette valeur. Cela a l'air génial, mais des problèmes sont susceptibles de survenir pendant le fonctionnement et ils sont difficiles à déboguer.

controllerAs 语法，这样你就不需要在 Angular 1 中用 $scope 了。在 Angular 2 中是肯定不用 $scopeVous pouvez en apprendre davantage sur la syntaxe controllerAs afin de ne pas avoir besoin d'utiliser

dans Angular 1. Dans Angular 2,

n'est définitivement pas utilisé.

Ce qui peut être dit ici est très limité. Il est recommandé de lire les documents officiels Merci de les lire attentivement :

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

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

Si vous souhaitez écrire une directive personnalisée, il est difficile de bien l'écrire sans comprendre

.

Ce qui précède est une compréhension purement personnelle, n'hésitez pas à me corriger #🎜🎜##🎜🎜#