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 class="dyn-content-ref" 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>