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>


 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS使用mock数据是一种常见的做法,可以帮助我们进行前端开发和测试。下面是一个简单的示例,演示如何在AngularJS使用mock数据。 首先,你需要创建一个mock数据文件,可以是一个JSON文件或JavaScript文件,来模拟接口返回的数据。例如,创建一个名为`mockData.js`的文件,内容如下: ```javascript angular.module('myApp') .value('mockData', { users: [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' } ] }); ``` 接下来,在你的AngularJS应用,你可以使用`$httpBackend`来拦截请求并返回mock数据。例如,在你的控制器注入`mockData`服务,并使用`$httpBackend`拦截请求: ```javascript angular.module('myApp') .controller('UserController', function($scope, $httpBackend, mockData) { // 拦截/users请求并返回mock数据 $httpBackend.whenGET('/users').respond(mockData.users); // 发送实际的请求 $http.get('/users').then(function(response) { $scope.users = response.data; }); }); ``` 这样,当你发送一个GET请求到`/users`时,`$httpBackend`会拦截请求并返回mock数据。 最后,确保在你的应用加载mock数据文件和设置`ngMockE2E`模块。例如: ```javascript angular.module('myApp', ['ngMockE2E']) .run(function($httpBackend) { // 启用ngMockE2E来拦截请求 $httpBackend.whenGET(/.*/).passThrough(); }); ``` 这样,AngularJS应用就配置好了使用mock数据。 注意,这只是一个简单的示例,实际的应用可能涉及更复杂的场景和数据。 希望对你有所帮助!如果你有任何进一步的问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值