结构-行为-样式-angularJs笔记

0、关于Ng-app

　　  通过ngApp指令来引导Angularjs应用是一种简洁的方式 ，适合大多数情况。在高级开发中，例如使用脚本装载应用，您也可以使用Bootstrap手动引导AngularJs应用。

1、ngModel实现Select

具体参见 AngularJs实现无限级下拉Select。

2、在$ scope域外调用$ scope的方法

element = document.querySelector('[ng-controller=help_controller]');

var $scope = angular.element(element).scope();

......

$scope.$apply();

3、Controller尽量不要取相同的名字；

4、ng-repeat有重复值的解决办法

当你传入下面这个数组到Ng-repeat中去的时候就会报错，因为有重复数据，怎么办呢，看下面：

$scope.items = ['red','grey','grey'];

上面的grey明显是数组中重复的数据，传入下面Html中：

<li ng-repeat="item in items" ng-bind="item"></li>

 

就会报错：

Error: [ngRepeat:dupes]

http://errors.angularjs.org/1.2.28/ngRepeat/dupes?p0=itemNaNn%items&p1=string%3Agrey&p2

=%22grey%22

说你的数据有重复的，解决方案如下：

<li ng-repeat="item in items track by $index" ng-bind="item"></li>

 

 

5、ng-Class的使用

第一种：

<span ng-class="{'glyphicon glyphicon-plus': impress.plus, 'glyphicon glyphiconminus':

impress.minus}" ng-click="swiftTitle(impress)" ></span>

你可以通过ng-click方法来改变impress对象中对应的属性的True或者false，为True的时候就显示对应的

Class。

第二种：

<div ng-class="{true: 'label-item-content container-fluid label-group-skin', false:

'label-item-content container-fluid'}[iseditor]" ng-show="impress.isshow">

当iseditor的值为True时显示第一个，否则显示第二个。

6、Angular中使用a标签

当你像这样

<a href="javascript:void;"></a>

 

就会报语法错误，最好写成

<a href="javascript:;"></a>

 

7、angular.forEach

angular自带的遍历方法，在一种特殊的情况下，会出现少遍历的情况，如下：

angular.forEach($scope.deleteSelected,function(value,key){

var len = $scope.myInitLabel.length;

for(var i=0;i<len;i++){

if(value.id === $scope.myInitLabel[i].id){

$scope.myInitLabel.splice(i,1);

}

}

})

上面代码中，如果执行删除原集合中的选项，在For循环中的Len长度并没有随着你删除选项执行而

改变（事实上，你删除了一个，原先在第二位的移到第一位，这个时候再想删除原先第二个就不行

，因为他实际上已经到第一位去了。）

解决方案：

angular.forEach($scope.deleteSelected,function(value,key){

for(var i=0;i<$scope.myInitLabel.length;i++){

if(value.id === $scope.myInitLabel[i].id){

$scope.myInitLabel.splice(i,1);

}

}

})

就是把集合写在循环中，实时更新集合长度。

8、ng-hide/ng-show

ng-hide/ng-show是控制显示隐藏的，但是有一个情况是：当你显示A的时候，不想显示B；显示B的时

候不想显示A；

<div class="label-search-common ">
    <div class="btn btn-default" ng-click="changeMainWindow()" ng-hide="deleteMask" ngshow="
    ismainwindow">
        <span class="glyphicon glyphicon-plus"></span> <span></span>
    </div>
    <div class="btn btn-default" ng-hide="ismainwindow" ng-click="changeMainWindow()">
        <span class=""></span>
    </div>
</div>
<div class="label-search-common ">
    <div class="btn btn-default" ng-hide="deleteMask" ng-show="ismainwindow"

ng-click="showDeleteMask()">
        <span class=" glyphicon glyphicon-minus"></span> <span></span>
    </div>
    <div class="btn btn-default" ng-show="deleteMask" ng-click="deleteLabel();">
        <span class=""></span>
    </div>
    <div class="btn btn-default" ng-show="deleteMask" ng-click="showDeleteMask();">
        <span class=""></span>
    </div>
</div>

上面这两个Div就是这种情况，我省略了它们关联的Div，这样，在切换deleteMask或者

ismainwindow的时候不会影响到他们内部的Div的显示与隐藏

9、只取一次数据函数

$scope.changeSelect1 = function(info){

$scope.selectInfo2 = [];

if(typeof $scope.initSelectInfo2 != "object"){

labelCommonServices.test2Service({},function(response){

$scope.initSelectInfo2 = response;

angular.forEach(response,function(value,key){

if(info&&info.code&&(value.forcode == info.code))

$scope.selectInfo2.push(value);

})

},function(response,status){ console.log("dd")});

}else{

angular.forEach($scope.initSelectInfo2,function(value,key){

if(info&&info.code&&(value.forcode == info.code))

$scope.selectInfo2.push(value);

})

}

}

10、想要取消让checkbox清零，遍历数组把Current设置为False就行

<input type="checkbox" name="{{fi.field}}" value="{{fi.field}}" ng-model="fi.current">

<span ng-bind="fi.describe" class="common-extract-table-span"></span>

11、路由项目默认进入根目录中的Index.html

12、指令的 scope中的变量不能有大写，controller一般都是用来放公用方法，link是用来做dom绑定操作的



13.关于路由

针对老式浏览器可以使用标签模式，针对现代浏览器可以使用HTML5模式。

 

前者在URL中使用#来防止页面刷新，同时形成浏览器历史记录。具体形式如下

 

http://yoursite.com/#!/inbox/all

 

AngularJS支持的另外一种路由模式是 html5 模式。在这个模式中,URL看起来和普通的URL

 

一样(在老式浏览器中看起来还是使用标签的URL)。例如,同样的路由在HTML5模式中看起来

 

是这样的:

 

http://yoursite.com/inbox/all

 

在AngularJS内部, $location 服务通过HTML5历史API让应用能够使用普通的URL路径来

 

路由。当浏览器不支持HTML5历史API时, $location 服务会自动使用标签模式的URL作为替代

 

方案。

 

两者之间的切换通过$locationProvider.html5Mode进行切换。

 

 

14.Radio的最佳实践

 

 

<div class="row-right">
    <input id="man" class="hideinput" ng-checked="myForm.sex == 1" type="radio" ng-model="myForm.sex" name="sex" value="1" />
    <span class="radio-span man" ng-class="{'active':myForm.sex == 1}" ng-click="selectRadio('man')">男</span>
    <input id="women" class="hideinput" ng-checked="myForm.sex == 2" type="radio" ng-model="myForm.sex" name="sex" value="2" />
    <span class="radio-span women" ng-class="{'active':myForm.sex == 2}" ng-click="selectRadio('women')">女</span>
</div>

 

$scope.selectRadio = function (type) {
            if (type == 'man') {
                $scope.myForm.sex = 1;
            } else {
                $scope.myForm.sex = 2;
            }
            /*  $('.row-right .radio-span').removeClass('active') && $('.row-right .'+type).addClass('active');
              $('.row-right input[type="radio"]').removeAttr('checked') && $('#' + type).attr('checked', 'checked');*/
        }

 

 15.ngmodel写法注意

 

 

 ngModel必须有 [  .  ]避免原型链继承的坑；即不能直接赋值为$scope上的基本类型；需包含一个点，即“userinfo.name”;

 

 

 16. angularjs ng-cloak避免Dom加载时闪烁

 17. ng-if 不能用来控制Dom的显示与隐藏，应该用Ng-show、ng-hide来控制。因为ng-if的显示与隐藏是删除与新建Dom节点，而Ng-show与ng-hide则是控制样式来显示与隐藏。

 

18、动态配置路由

　　A .

$stateProvider.state('contacts', {
  url:'/contacts/:id'
  templateUrl: function (stateParams){
    return '/partials/contacts.' + stateParams + '.html';
  }
})

    B.

用Ajax请求后台的路由信息，用Angular.forEach遍历组装。注意要同步Ajax，并且遍历所有的路由，不能写一部分传一部分。

 

 

转载于:https://www.cnblogs.com/ChickenTang/p/5655395.html