angularjs一些简单的指令

指令虽简单，但是不长使用容易忘记

ng-model

一般用来进行双向数据绑定，把可以有输入的标签：input、textarea、select等和其所在作用域下的属性做绑定，两边有任意一方数据发生改变，另一方也会同步发生改变

js代码

<input type="text" ng-model="name"><br><br>
<span>{{name}}</span>
// 当改变input的value值的时候，span中的内容就发生了改变

ng-bind 和插值语法{{}}

ng-bind 和插值语法{{}}是单向数据绑定
ng-bind：是将数据仓库中的属性绑定到标签上，如div、span、p等

{{}}：数据仓库里的属性绑定到 插值语法所占位的地方
可以放在标签体的内部，也可以标签行内样式的属性值上

js代码

angular.module("n1.app",[])
    .run(function($rootScope){
        $rootScope["vm"] = {
            msg: "hello world",
            bgc: "red"
        };
    });

html

<span ng-bind="vm.msg">我是原来的内容</span>
<span>{{vm.msg}}</span>
<div style="width: 100px;height: 100px;background-color:{{vm.bgc}}"></div>

ng-class

样式绑定，将数据仓库的属性绑定到标签的class属性上
传递一个对象，即键值对形式
键：表示类名
值：为布尔值，true表示该类生效；false表示该类不生效

js代码：

angular.module("n1.app",[])
    .run(function($rootScope){
        $rootScope["vm"] = {
            classDefine:{
                'col-one': false,
                'col-two': true
            }
        };
    });

html结构

// 和数据仓库中的属性进行绑定
 <div ng-class="vm.classDefine"
     style="width:100px;height: 100px;"></div>

// 不一定非要是数组仓库中的属性，直接写个对象也是可以的
 <div ng-class="{'col-one':true,'col-two':false}"
       style="width:100px;height: 100px;"></div>

ng-style

样式绑定，绑定的是行内样式，数据仓库传递的也是一个对象，这个对象中的键值对书写格式和css样式书写一样

js代码

angular.module("n1.app",[])
    .run(function($rootScope){
        $rootScope["vm"] = {
            styleDefine:{
                width: "100px",
                height: "100px",
                "background-color": "green"
            }
        };
    });

html结构

<div ng-style="data.styleDefine"></div>

ng-if

绑定标签的存在性，值为true时：标签存在，为false时：标签不存在

<div ng-if="true">第一个div</div>
<div ng-if="false">第二个div</div>

ng-show 和 ng-hidden

定标签的”显示性”
ng-show属性为true时，显示该标签；
ng-show=”false”，给标签加了一个ng-hide的类，让标签的display样式为hidden，达到隐藏的效果（标签本身还是存在的）

<div ng-show="true">我是第一个div</div>
<div ng-show="false">我是第二个div</div>