AngularJs定制样式插入到ueditor中的问题小结(2)

数据自然是从api里面获取,ng如何获取api里的数据呢?我们来看看,主要是利用http,获取数据,然后利用then方法进行回调,得到 http,获取数据,然后利用then方法进行回调,得到scope.data的数据。

angular.module('service') .service('ArticleService', function ($http) { return {searchArticle: function(title){ return $http.get('api/article/search',{ data: { title:title } }); } }; });

这里我们声明了ArticleService,并给它返回了api数据,那么我们将该依赖注入要调用的页面即可调用其方法。还是看下代码:通常服务调用

API返回的数据放在一个文件夹里面而控制数据的控制器单独放在一个文件夹里面,那么我们来看下控制器里是如何回调api的数据。

angular.module('article.controllers') .controller('serviceCtrl', function ($scope, $rootScope, $filter, $timeout, $state, $stateParams, ContentService,, ArticleService, type) {

注意,你需要把ArticleService注入到控制器里面,然后才能回调数据。怎么回调数据呢?看下面的代码:

var arcfullSearch={ text: '', result: [], selected: [], //选择后的数据先存入数组 beginSearch: function () { var self = this; var text = self.text.trim(); if(!text) return; ArticleService.searchArticle(text).then( function (data){ //获取得到数据 第二个data表示获取数组里的内容,第一个是传进来的参数 self.result = data.data;//获取数据 }, function (err) { console.log(err); }); }, };

OK,我们成功的回调到了函数数据。关于搜索部分,下面总结下不清楚的知识点。

总结知识点

1.如何将数组变成字符串的写法

AngularJs定制样式插入到ueditor中的问题小结

2.关于replace替换为函数的用法

ECMAScript规定,replace()方法的参数replacement可以是函数也可以是字符串。在这种情况下,每个匹配都调用该函数,它返回的字

符串将替换文本使用。function回调函数返回的第一个参数表示匹配到的字符,第二个以及往后都是匹配到的分组数据。来看下代码。

3.关于[p.slice(0,index)][p.slice(index+1)]是什么鬼?调试一下就知道了。

AngularJs定制样式插入到ueditor中的问题小结

再来看待合成代码就明白了什么意思。

var arr = serve.map(function (xx) { return item.html.replace(/{{([\w\.]+?)}}/gi, function (match, p) { var index = p.indexOf('.'); if (index > 0) { return formatField(xx[p.slice(0, index)][p.slice(index+1)]); } else { return formatField(xx[p]); } }); });

4.关于定时器setTimeout的原理,先来看看代码

AngularJs定制样式插入到ueditor中的问题小结

为什么输出的是-1呢?我们先来看下原理setTimeout()

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

setTimeout 运用在延迟一段时间,再进行某项操作。即在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

setTimeout(代码,延迟时间);

该延迟时间并不是你期望的时间,不同的浏览器,延迟时间不一样。拿上面例子来看,也就是说延迟时间并不是上面的0。对比来看

AngularJs定制样式插入到ueditor中的问题小结

也就是说setTimeout只执行一次,但时间并不是0,具体为多少秒延迟,不确定。那么就不奇怪,为什么出现的为-1了。我们来分析下该程序,

当i=3时,while(3)后,i减为2,执行一个setTimeout

当i=2时,while(2)后,i减为1,执行一个setTimeout

当i=1时,while(0)后,i减为2,执行一个setTimeout

当i=0时,while(0)后,i减为-1,此时程序结束,但设置setTimeout的时间间隔 为0 不会理解 执行的,会插入到线程的执行队列中,等到i

变为-1时候,才会执行前面的三个setTimeout,而此时i已经变为-1了,所以,输出为-1.此时打印的console是之前那个console打印出来的

setTimeout是异步代码,也就是说这样写setTimeout(fn, 100)并不代表fn肯定在100毫秒之后马上就执行,延迟很可能会更长。因为所有的

异步事件(包括计时器、或者一个 XMLHttpRequest 完成)仅仅当程序执行期间有空闲的时候才会执行,不是你规定了什么时候就什么时候执行。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxsyf.html