发表于: 2017-06-22 21:44:49
1 948
今天完成的事:试着用官网的工厂模式去写http服务,但写着写着感觉不对,后来发现有很多需求去写的,比如
弹出框 $modal,这个也是第一次看到的新弹出框,$modal只有一个方法:open,这方法有个属性是scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope。
写一个比较正常的$model:
var ModalDemo = angular.module('ModalDemo', [ 'ui.bootstrap' ]);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.items = [ 'item1', 'item2', 'item3' ];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl : 'myModalContent.html',
controller : ModalInstanceCtrl,
resolve : {
items : function() {
return $scope.items;
}
}
});
modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
console.log('modal is opened');
});
modalInstance.result.then(function(result) {
console.log(result);
}, function(reason) {
console.log(reason);// 点击空白区域,总会输出backdrop
// click,点击取消,则会暑促cancel
$log.info('Modal dismissed at: ' + new Date());
});
};};
templateUrl:模态窗口的地址
resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy()
另外,$modalInstance扩展了两个方法$close(result)、$dismiss(reason),这些方法很容易关闭窗口并且不需要额外的控制器
而萝卜多的官网会不一样一点,比如:
var modal = $modal({
html: true,
show: false,
templateUrl: 'views/template/ptteng-confirm-0.0.1.html',
controller: function ($scope) {
$scope.content = content;
$scope.ok = function () {
typeof okFn == 'function' && okFn();
modal.$promise.then(modal.hide);
};
$scope.cancel = function ($scope) {
typeof cancelFn == 'function' && cancelFn();
modal.$promise.then(modal.hide);
};
}
});
modal.$promise.then(modal.show);
不过我没搞懂这个html和show表达的是什么含义还有就是下面的typeof方法,其“==”然后带的是''的函数,有点没搞懂。百度上是说typeof用来判断是不是数组......心情复杂没理解其后面的原理。
顺便发现了箭头函数简写,
传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});;
简写:
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
明天计划完成的事:把新版本的富文本写上去,然后再看看官网写的方式,自己去探索摸索下。
评论