angular 学习总结

写在前面：

  之前的一年里都在用vue开发，现在开始使用angular.js，(注：受框架影响，现在学的是v1.x)又开始了漫长的学习之路。
  不过不得不提的是：vue的文档比angular.js要友好太多太多。基本上读完vue的文档就可以上手开发了。但是angular的教程缺乏系统性，感觉不够友好。可能是纯英文的原因吧。。。
  这里也只是先把工作中接触到的知识点或踩坑做些记录。

过滤器相关

orderBy

<div 
    ng-repeat="item in itemArr | 
        orderBy:['name'，'- id'， orderVersions] track by $index">
</div>

上面代码表示：orderBy后面可以跟一个数组，按优先级从前往后进行排序。数组里可以是string( name:正序，id倒序)，函数(orderVersions)。当然简单情况下，可以只跟一个 string或一个fn

指令相关：

ng-init

<div 
    ng-module="myFeature/common/views/ttt.html" 
    ng-init="dataModal='doneIssues';orderType=pane.selfOrderType">
</div>

上面的代码表示：在ttt.html中初始化了dataModal和orderType两个变量。且他们的初始值分别是：‘doneIssues’和pane.selfOrderType的值。
通过字面量init可能会误认为orderType经初始化后不会动态改变了。错！

ng-init 也是挂载到$scope上的。而且后面也是可以改变的。

例子为证：
angular.js官网上有提醒开发者慎用该指令来声明变量。因为会添加一些不必要的逻辑到 scope 中，建议可以在控制器中声明变量 。

自定义指令

angular.module('myModule',[]).directive('myDirective'，function(){
    return {
        restrict: 'ECMA'//指令的调用方式，可以是任意值的
        组合或任一值 ,常用E和A
        // E:元素  <my-directive></my-directive>
        // C：class <div class="my-directive"></div>
        // M: 备注 <!---directive: my-directive-----> 
        // A: 属性  <div my-directive></div>
        priority: Number //当在一个Dom上使用多个指令时，
        按优先级生效。不常用。
        replace：Boolean //指令模板是否替换原有dom，
        //注意：如果设为true,模板必须只有一个根节点，不然报
        错。
        template:function/string
        templateUrl:模板url
        scope:true/false/Object //为指令创建作用域
            //true:一开始绑定父作用域的变
            量，但修改子作用域后，会创建并继承
            父作用域的变量，变成独立的作用域。
            不会影响父作用域。
        //false:默认值，直接使用父作用域的变量。改变父作用
        域的变量会影响指令内该变量的值，反之亦然。
        //对象：{
            test1:'&', //和父作用域的函数建立联系
            test2:'@', //单向绑定，父作用域可以改变子
            作用域的，反之不可。
            test3:'=' //父子作用域互相影响。
            }
        controller:function($scope){},
        link:function($scope){}    
    }
}）

参考链接点此

• 实例1： scope:false (默认，共用父作用域变量)

<div ng-controller="main" >
    <input type="text" ng-model="name" />
    <hello></hello>
</div>
//注：这里，上面的input框值改变，下面就变。下面变，上面也会变。
var m1 = angular.module('myApp',[]);
m1.directive("hello",function(){
    return {
        restrict:"ACEM",
        template:"<div>scope测试：
        <input type='text' ng-model='name'/></div>",
        scope:false
    }
}
m1.controller('main', ['$scope', function($scope){
    $scope.name = "main-title";
}])

• 实例2：scope 为true

<div ng-controller="main" >
    <input type="text" ng-model="name" />
    <hello></hello>
</div>
var m1 = angular.module('myApp',[]);
m1.directive("hello",function(){
    return {
        restrict:"ACEM",
        template:"<div>scope测试：<input type='text' 
        ng-model='name'/></div>",
        scope:true
    }
})
m1.controller('main', ['$scope', function($scope){
    $scope.name = "main-title";
}])
// 

• 实例3 scope是对象，且变量绑定方式为’@’和‘&’

<div ng-controller="other" >
    <input type="text" ng-model="name" />
    <hello1 name="{{name}}" test="clickFn()"></hello1>
</div>
// 注：@是单向绑定，父作用域的变量值改变会影响子作用域，反之不可。
&是绑定函数。这里必须在调用指令的时候为指令的变量赋值。
m1.directive('hello1',function(){
    return {
        restrict:"AE",
        scope:{
            name:'@',
            test:'&'
        },
        template:"<div ng-click='test()'>
        scope测试1：<input type='text' 
        ng-model='name' /></div>",

    }
})
m1.controller('other', ['$scope', function($scope){
    $scope.name = "other-title";
    $scope.clickFn = function(){
        alert('ddd&')
    }
}])

• 实例4 scope是对象，绑定为‘=’

<div ng-controller="settting" >
    <input type="text" ng-model="name"/>
    <hello2 name="name"></hello2>
</div>
//双向绑定。父子作用域互相影响。同样必须在调用的时候赋值。不然报undefined
m1.directive('hello2', function () {
        return {
            restrict: "AE",
            scope: {
                name:'='
            },
            template: "<div>scope测试2：
            <input type='text' ng-model='name'/></div>",
            controller: function ($scope) {
                $scope.name = "Angular2"
            }
        }
    })
    m1.controller('settting', ['$scope', function($scope){
    $scope.name = "settting-title";
}])

实例3和4中，如果不给指令的变量赋值会报的错误参考：
点击查看