angularjs

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

如何解决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

如何监听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 拦截器与全局错误处理

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

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

查看更多

angularjs

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。