angular细节整理

记录angularjs中比较容易忽视的问题

1、关于动态生成ui-sref的问题 ui-route中ui-sref中的路径无法动态生成的，如果要实现动态生成ui-sref路径，可以使用$state.go做跳转：

if($location.path().substring(8,14) == 'zrssjg'){  $state.go('sousuo.zrssjg', {topic:$scope.keyWord}, { reload: true });}else if($location.path().substring(8,14) == 'dtssjg'){  $state.go('sousuo.dtssjg', {topic:$scope.keyWord}, { reload: true });}else if($location.path().substring(8,14) == 'nmssjg'){  $state.go('sousuo.nmssjg', {topic:$scope.keyWord}, { reload: true });}else if($location.path().substring(8,14) == 'htssjg'){  $state.go('sousuo.htssjg', {topic:$scope.keyWord}, { reload: true });}else if($location.path().substring(8,14) == 'zwssjg'){  $state.go('sousuo.zwssjg', {topic:$scope.keyWord}, { reload: true });}//ifelse==>$scope.doSerchClick = function(item) {  $scope.sType = {'0':'sousuo.zrssjg',        // 找人搜索结果          '1':'sousuo.dtssjg',        // 实名动态          '2':'sousuo.nmssjg',        // 匿名动态          '3':'sousuo.htssjg',        // 话题          '4':'sousuo.zwssjg'}[item] || 'zrssjg';     // 职位 || 找人  $scope.keyWord = ''; }

2、使用$templateCache服务动态绑定html页面中ng-bind内容：

$scope.toTrends = function(type) {if (type == 1) {    $templateCache.put('templateId.html', '{{reply.replier.realName}}:');$templateCache.put('template.html','{{data.dynamicRef.dynamicShare.publisher.realName}}:');} else {  $templateCache.put('templateId.html','{{reply.replier.account.nickName}}:'); $templateCache.put('template.html','{{data.dynamicRef.dynamicShare.publisher.account.nickName}}:');}  $scope.typeStatus = type;  pushContent($scope.typeStatus);};//html:<span ng-include=" 'template.html' "></span>//这边的template.html能根据vontroller中的状态动态生成，同时也能实现双向绑定的效果

3、element匹配元素

angular.element(document.querySelector('.a'))

4.$sce服务

我们用ng-bind-html这样的指令来绑定一段动态生成的html，结果不是我们想要的，例如：$scope.currentWork.description = “hello,<br><b>今天我们去哪里？</b>”我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这样的hello,今天我们去哪里？ 怎么办呢？、结果是将样式与html标记过滤掉了，我们可以使用$sce服务来解决这个问题：$scope.currentWork = work; $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description); 把它封装成一个过滤器就可以在模板上随时调用了app.filter('to_trusted', ['$sce', function ($sce) {return function (text) { return $sce.trustAsHtml(text);};}]);html code:<p ng-bind-html="currentWork.description | to_trusted"></p>

原标题：angular细节整理

关键词：