angular+ui-router+layui的使用心得

最新推荐文章于 2023-04-19 15:54:59 发布

Doniet

最新推荐文章于 2023-04-19 15:54:59 发布

阅读量7.4k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/doniet/article/details/74938027

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

近来，完成公司的一个项目，项目使用angular+ui-router+layui框架开发，由于刚刚接触angularjs,因此遇到各种各样的坑。在这里记下印象最深的几个坑；

一、ng-repeat

 当数组元素有至少两个相同时，报Error: [ngRepeat:dupes]；

    //controller.js
    $scope.items = [1,2,3,3,2,2];

<!-- html -->
<div ng-repeat="item in items">{{item}}</div>

解决的办法：

<!-- html -->
<div ng-repeat="item in items track by $index">{{item}}</div>

二、指令中的scope

纵观angularjs,可以说angular项目都是在指令的基础上建立的，scope是连接控制层与view层的桥梁。根据需求，有时希望在指令中共享父域的变量，有时希望使用父域的变量，却不受父域的影响，有时希望指令拥有自己独立作用域。
指令中的scope的取值：

scope:Boolean Or Object

scope的默认值为false:

<!-- html -->
<body>
    <div ng-controller="parentCtrl">
         <div><button ng-click="test1()">parent</button></div>
         <div ng-test="true"></div>
    </div>
</body>

//js
var app = angular.module('app',[]);
app.controller('parentCtrl',function($scope){
     $scope.parentName = "parent";
     $scope.test1=function(){
          alert($scope.childName);
     }
});
app.directive('ngTest',function(){
       return {
            restrict:'AE',
            scope:false,
            template:function(){
                 return '<button ng-click="test2()">child</button>'
            },
            controller:['$scope',function($scope){
                  $scope.childName = "child";
                  $scope.test2 = function(){
                          alert($scope.parentName);
                  }    
            }]
       }
});

点击parent按钮弹出“child”,点击child按钮弹出“parent”;
2. 将scope设置为true:
点击parent按钮弹出“undefined”,点击child按钮弹出“parent”;
3. 将scope设置为{}:
点击parent按钮弹出“undefined”,点击child按钮弹出“undefined”;

三、angular项目与layui结合的痛点

项目中使用了大量layui的弹出层。开始时，每个模块只要用到弹出层，都会把弹出层的内容（html片段）在模块中写出来，给个id，然后通过jquery取出来，这样造成了该模块的代码臃肿，$scope中定义了大量的变量去展示它。

后来，把所有的弹出层用指令写出来，通过组件之间的交互，将数据展示出来，并将弹出层的各种操作搬到指令，大大减少了模块的代码。

四、与WebSocket结合的痛点

项目中有这样的场景：有一个房间列表，点击房间进入聊天室。使用ui-router配置如下：

var app = angular.module('app', ['ui-router',...]);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
      ...code
      $stateProvider.state('room',{
        ...code
        }).state('chat',{
             url : '/chat',
             ...codde          
        })
}])

在聊天室的controller中用websocket去接受聊天消息，并接受服务器端推送过来的消息。在测试中发现：
同一个浏览器中，在同一个窗口打开，没有任何问题；但是多个窗口打开，如窗口A从房间a进入聊天室，然后窗口B从房间b进入聊天室。当窗口A刷新时，页面变成房间b的聊天室。那么问题来了，窗口A中的scope的变量是怎么变成了窗口B的呢？
大致分析了一下：由于窗口A和窗口B的地址是相同的，服务器推送消息时，无法区分。因此两个窗口都接受到推送过来的消息，都改变scope中的变量。当窗口刷新时，窗口A进行脏检查，于是更新接受到消息。
解决办法：

...code
state('detail',{
             url : '/chat/:id',
             ...codde          
})

传入房间id，这样问题就解决了！

Doniet

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
angular+ui-router+layui的使用心得

近来，完成公司的一个项目，项目使用angular+ui-router+layui框架开发，由于刚刚接触angularjs,因此遇到各种各样的坑。在这里记下印象最深的几个坑；一、ng-repeat 当数组元素有至少两个相同时，报Error: [ngRepeat:dupes]； //controller.js $scope.items = [1,2,3,3,2,2];<!--
复制链接

扫一扫