最近一直在研究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 ;
}
看作视图与controller之间的纽带吧。
既然你能理解vue,那给你做个不恰当的对比,vue里面有个data()函数,methods对象,他们返回的属性和方法能直接在模板中使用,同样的在angular 中,在scope对象上的方法和属性,可以在模板中直接使用。
Angular系列学习笔记(一)—— 聊聊angular的模块化
简单来说,同意楼上说的,可以理解为视图(view)与控制器(controller)之间的纽带。
实际一点说,对于数据驱动框架,页面(视图)的改变都是基于数据改变的,这个
$scope
一般是用来存储页面数据的。当然功能不仅限于存储页面上可见的数据,还可以存储一些不需要展示,但会让“其他事情发生”的数据。复杂一点说,我的理解是,
同样存在 JavaScript 中作用域的特点,或者说存在继承的特点。$scope
是一个基于$rootScope
的实例。scope 这个单词本身就有作用域的意思,Angular 中的$scope
是一个基于$rootScope
的实例。scope 这个单词本身就有作用域的意思,Angular 中的controller
可以通过$parent
访问父级controller
的$scope
举个例子,JavaScript 中,子级函数可以通过变量名访问父级函数的作用域,但父级不能访问子级。同样,Angular 中,子级controller
可以通过$parent
访问父级controller
的$rootScope
;二是通过$emit
由事件去控制;三是通过factory
或者service
还有constant
对于父级访问子级,在 JavaScript 中的解决方案一般有两种,一是通过全局变量,二是通过闭包的写法把自己作用域的某一个值暴露出来。在 Angular 中,方法类似,一是通过$scope
长远一点说,controllerAs
语法,这样你就不需要在 Angular 1 中用$scope
了。在 Angular 2 中是肯定不用$scope
可以去了解一下controllerAs
语法,这样你就不需要在 Angular 1 中用的。
https://docs.angularjs.org/gu...这里能说到的很有限,推荐看下官方文档,请一定要仔细看:
https://github.com/angular/an...
如果你要写 custom directive(自定义指令),那么不理解 以上纯粹是个人理解,欢迎指正🎜🎜$scope