问题描述
最近一直在研究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 ;}
问题解答
回答1：看作视图与controller之间的纽带吧。
回答2：既然你能理解vue，那给你做个不恰当的对比，vue里面有个data()函数，methods对象，他们返回的属性和方法能直接在模板中使用，同样的在angular 中，在scope对象上的方法和属性，可以在模板中直接使用。
回答3：Angular系列学习笔记（一）—— 聊聊angular的模块化
回答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 是很难写好的。
以上纯粹是个人理解，欢迎指正
