发表于: 2017-06-22 20:22:47

2 904



任务十三

今天完成的事情

  1. 最近研究自定义指令和缓存,研究的身体有点虚,头晕脑胀的,一天都特别难受,所以今天就简单研究了一下angular-strap的模态框。
  2. 明天计划的事情

  1. 接口通了测接口,接口没通继续研究项目代码。

遇到的问题

  1. 1.发现使用angular-strap的时候没有动画效果,仔细看了看官网文档,连猜带蒙的估计出来是要下一个angular-motion的css文件,下好导入后有了淡入淡出的动画效果。

2.直接使用angular-strap的模态框,设置起来比较麻烦,每次都要传一堆参数,而像我们之前调用jquery的模态框的时候,都比较简单,只需要调用$.alert(content,okFn,hideBtn),往里面传三个参数就可以了。那我们能不能也将angular-strap的模态框也写成这种形式呢?答案是可以的,我们只要在$rootScope上定义一个alert方法就可以了,具体代码如下:

var app=angular.module("app",['ngAnimate', 'mgcrea.ngStrap']);
app.run(function ($rootScope,$modal) {
$rootScope.alert = function (content, okFn, hideBtn) {
var modal = $modal({
html: true,
show: false,
template: 'alertTemplate.html',
controller: function ($scope) {
$scope.hideBtn = !hideBtn;
$scope.content = content;
$scope.ok = function () {
typeof okFn == 'function' && okFn();
modal.$promise.then(modal.hide);
};
$scope.off = function () {
modal.$promise.then(modal.hide);
}
}
});
modal.$promise.then(modal.show);
};
});
app.controller("mainCtrl",function ($rootScope,$modal,$scope) {

$scope.alert=function () {
$rootScope.alert("汽车人,出发",function () {
console.log("你真棒");
},true);
};

})


这种写法和思路都可以学习一下,之前也是看过jquery模态框插件的写法,和这个思路基本上一样,但是换成angualr,我就蒙了,看来举一反三的能力还是比较差。


  1. 收获

  2. 1知道了在angular中如何将angular-strap的模态框封装成一个函数。



返回列表 返回列表
评论

    分享到