发表于: 2017-06-22 21:44:49

1 946


今天完成的事:试着用官网的工厂模式去写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));


明天计划完成的事:把新版本的富文本写上去,然后再看看官网写的方式,自己去探索摸索下。




返回列表 返回列表
评论

    分享到