angularjs中自定义绑定标签

在使用ng的过程中,默认的绑定符号是 \{\{ng变量\}\},但有时候会与其他插件的一些模版符号冲突,因此我们需要自定义ng渲染的符号,能不能将 \{\{ng变量\}\} 替换成 [[ng变量]] 或者 {[ng变量]},答案是肯定的, 主要是利用 $interpolateProvider内置服务 修改标识符。代码如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body ng-app="MyModule">
<form id="form1" runat="server">
<div>
<div ng-controller="main">
[[test]]
</div>
</div>
</form>
<script type="text/javascript">
angular.module('MyModule', []).config(['$interpolateProvider', function ($interpolateProvider) {

angular.bootstrap(document.documentElement,

[function ($interpolateProvider) {

$interpolateProvider.startSymbol('[[');

$interpolateProvider.endSymbol(']]');

}]);

}]);
function main($scope, $http) {
$scope.test = "aaaa";
}
</script>
</body>

如何解决angularjs中post参数获取不到的问题

解决angularjs post方式提交时,获取不到参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
angular.module('MyModule', [], function ($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

for (name in obj) {
value = obj[name];

if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value instanceof Object) {
for (subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}

return query.length ? query.substr(0, query.length - 1) : query;
};

// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function (data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
} ];
});

将这段代码添加到指定的模块上,作用是将Content-Type 请求方式由 application/json 变为 'application/x-www-form-urlencoded;charset=utf-8

1
2
3
4
5
6
7
8
9
10
$scope.save = function () {
$http.post(location.href + "?action=Save", {
aaa: "1111",
bbb: "2222"
}).success(function (r) {
alert(r);
}).error(function () {

});
}

这样后台就能正常的获取参数了

如何监听angularjs列表数据是否渲染完毕

有时候我们需要在ng列表元素渲染完毕后去执行一段js脚本,angularjs 刚好提供了ng-repeat 的一个属性$last,然后为大家简单介绍2种方式

第一种通过回调函数

前端HTML
1
2
3
4
5
<ul class="smart-timeline-list">
<li data-ng-repeat="item in lists" on-finish-render-filters="Complete">
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>

#####js脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
var finishFunc=scope.$parent[attr.onFinishRenderFilters];
if(finishFunc)
{
finishFunc();
}
}
}
};
})
.controller('test',["$scope",function($scope){
$scope.Complete=function(){
$('#div_scrollbar').tinyscrollbar();
}
}]);

  • 分析:on-finish-render-filters 传入一个回调函数Complete ,渲染时每次会判断当前渲染记录是否为最后一条,若为最后一条,则执行Complete 函数。

第二种方法是用消息传递的机制

1
2
3
4
5
<ul class="smart-timeline-list">
<li data-ng-repeat="item in lists" on-finish-render-filters>
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>
js脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
$timeout(function() {
//根据controller的关系是选择$emit或者$broadcast
scope.$emit('ngRepeatFinished');
});
}
}
};
})
.controller('test',["$scope",function($scope){
$scope.$on('ngRepeatFinished'function (ngRepeatFinishedEvent) {
$('#div_scrollbar').tinyscrollbar();
});
}]);
  • 分析:渲染时同样每次会判断当前渲染记录是否为最后一条,若为最后一条,则想父类或者子类的controller传递消息,对应的controller里添加消息的接受监听方法。

angularjs 拦截器与全局错误处理

用angularjs(后面简称 ng)刚开始可能会遇到这样一些疑问,ng 大多时候请求的是静态资源和片段
如何在请求片段的之前去捕获请求,并判断用户是否在登录状态 ,或者用户登录是否过期?

$httpAngularJS$http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作。还有一些情况是我们希望俘获响应,并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。

查看更多

angularjs 如何实现自定义html的显示

最近在使用angularjs做一个列表展示的功能,突然发现自定义行的内容里不能包含html标签。于是翻阅了一些资料和API找到了解决的办法。

  • 首先我们看下面一段代码
1
2
3
4
5
6
<table data-ng-controller="ListController">
<tr data-ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{item.content}}</td>
</tr>
</table>
  • 这里item对象的content属性里包含 html标签,例如 item.content=”我是内容,如果出现这样的内容,不做任何处理的情况下页面会报错,导致内容无法显示,这是因为 angularjs的安全机制 引起的,angularjs渲染时不允许片段里包含html元素,如果需要加入自定义的html片段,需要调用它内部的服务$sce里的trustAsHtml方法来过滤既然angularjs 为我们提供了这个方法,于是我们稍微改写下前端的html,变成下面这样:
1
2
3
4
5
6
<table data-ng-controller="ListController">
<tr data-ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{getContentHtml(item.content)}}</td>
</tr>
</table>
  • 接着我们在ListController里定义一个getContentHtml 方法来处理 这段文本内容。ListController 里需要引入$sce 服务
1
2
3
4
5
6
7
8
9
10
11
12
function ListController($sce,$scope)
{
$scope.items=[
{"title":"aaa","content":"<a href='www.peng8.net'>aaaa</a>"},
{"title":"bbb","content":"<a href='www.peng8.net'>bbbb</a>"}
]
$scope.getContentHtml=function(content)
{
//可以在此拼接其他的html
return $sce.trustAsHtml(content);
}
}
  • 以上是一种解决方案,那其实还有一种处理方案,也是通过$sce.trustAsHtml,但我们将其写在过滤器中,这样就可以避免多个controller里都要写相应的处理方法,但有些页面的业务逻辑比较复杂,还是得单独写在自己的controller里,依情况而定!为指定的模块 创建过滤器,例如我们为 app.controllers 创建了一个名叫 to_trusted 的过滤器
1
2
3
4
5
6
angular.module('app.controllers', [])
.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
  • 前端页面的处理将会更加简洁,我们稍作修改变成如下:
1
2
3
4
5
6
<table data-ng-controller="ListController">
<tr data-ng-repeat="item in items">
<td>{{item.title}}</td>
<td ng-bind-html="item.content | to_trusted"></td>
</tr>
</table>

这样,angularjs渲染的时候过滤器会自动去处理这段Html。