1.常用指令

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/foundation.min.css">

    <style>

        .tx{

            width: 50px;

            height: 50px;

            margin-bottom: 10px;

            margin-left: 80px;

        }

    </style>

</head>

<!--ng-bind,{{}},ng-model,ng-show/hide,ng-if,ng-checked,ng-src-->

<!--ng-href,ng-class,ng-selected,ng-submit,ng-disable,ng-change-->

<body style="padding:10px" ng-app="app">

<div ng-controller="UserCtrl">

    <form name="f" ng-submit="register(user)">

        <fieldset>

            <legend>基本信息</legend>

            <img ng-src="{{user.icon}}"

                 ng-class="{'tx':user.showicon}"/>

                 <!--ng-hide="user.isShowImg"-->

                 <!--ng-show="user.isShowImg"-->

                 <!--ng-if="user.isShowImg"-->

            <div>

                <input type="text" ng-model="user.uname" placeholder="用户名" required />

                <input type="password" placeholder="密码"/>

                职位：<select>

                    <option value="">--请选择--</option>

                    <option value="1" ng-selected="user.zw=='1'">Java工程师</option>

                    <option value="2" ng-selected="user.zw=='2'">web工程师</option>

                </select>

                性别：<input type="radio"

                       ng-checked="user.sex=='1'"

                       name="sex">&nbsp;男&nbsp;

                <input type="radio"

                       ng-checked="user.sex=='0'"

                       name="sex">&nbsp;女&nbsp;

            </div>

        </fieldset>

        <fieldset>

            <legend>爱好</legend>

            <div>

                <input type="checkbox" ng-checked="isChecked(1)" name="爱好">&nbsp;篮球&nbsp;

                <input type="checkbox" ng-checked="isChecked(2)" name="爱好">&nbsp;足球&nbsp;

                <input type="checkbox" ng-checked="isChecked(3)" name="爱好">&nbsp;排球&nbsp;

            </div>

        </fieldset>

        <button type="submit"

                ng-disabled="f.$invalid"

                class="button expand">提交</button>

    </form>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

    angular.module('app',[])

    .controller('UserCtrl',function($scope){

        $scope.user={

            isShowImg:true,

            showicon:true,

            icon:"images/demo.jpg",

            uname:"",

            pwd:"",

            zw:"2",

            sex:"1",

            aihao:[1,3]

        };

        $scope.isChecked=function(n){

            var isok=false;

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

                if(n==$scope.user.aihao[i]){

                    isok=true;

                    break;

                }

            }

            return isok;

        };

        $scope.register=function(u){

            console.log(u);

        }

    });

</script>

</html>

2.angular与element（1）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">

</head>

<body>

<div ng-app="app">

    <div enter leave>我在这</div>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

var app=angular.module('app',[]);

app.directive('enter',function(){

    return function(scope,element,attrs){

        element.bind('mouseenter',function(){

            element.addClass('alert-box');

        })

    }

});

app.directive('leave',function(){

    return function(scope,element,attrs){

        element.bind('mouseleave',function(){

            element.removeClass('alert-box');

        })

    }

});

</script>

</html>

angular与element（2）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/foundation.min.css">

</head>

<body>

<div ng-app="app">

    <hello></hello>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

var app=angular.module('app',[]);

app.directive('hello',function(){

    return {

        restrict:"E",

        template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',

        link:function(scope,element){

            scope.$watch('txt',function(newVal){//监听

                if(newVal==='error'){

                    element.addClass('alert-box alert')

                }

            })

        }

    }

});

</script>

</html>

3.自定义HTML组件

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>

</head>

<body>

<p>p:restrict含义(A属性，E标签元素（结合template插入），C类名)与应用，replace使用，template使用</p>

<div ng-app="app">

    <div hello class="leiming"></div>

</div>

</body>

<script src="js/angular.min.js"></script>

<script>

var app=angular.module('app',[]);

    app.directive('hello',function(){

//        return {

//            restrict:'E',//自定义HTML标签，在dom中显示标签名为hello

//            replace:true,//默认false，替换掉自定义的directive名称，即把hello替换为div

//            template:'<div>hello Angularjs</div>'

//        };

        return {

            restrict:'A',

            link:function(){

                alert("我是属性")

            }

        };

    });

    app.directive('leiming',function(){

        return {

            restrict:'C',

            link:function(){

                alert("我是类名")

            }

        };

    });

</script>

</html>

4.directive与controller

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--<p>controller属性使用，link使用，directive中调用controller的方法</p>-->

    <div ng-app="app">

        <!--<div ng-controller="AppCtrl">-->

            <!--<div enter="loadMoreData()">加载数据</div>-->

        <!--</div>-->

        <food apple orange banana>所有食物</food>

        <food apple banana>所有食物</food>

    </div>

</body>

<script src="js/angular.min.js"></script>

<script>

var app=angular.module('app',[]);

//app.controller('AppCtrl',function($scope){

//    $scope.loadMoreData=function(){

//        alert("正在加载数据...")

//    };

//    $scope.delData=function(){

//        alert("正在删除数据...")

//    }

//});

//app.directive('enter',function(){

//    return function(scope,element,attrs){

//        element.bind('mouseenter',function(){

//            //scope.loadMoreData();

//            //scope.$apply('loadMoreData()');

//            scope.$apply(attrs.enter);

//        })

//    }

//});

app.directive('food',function(){

    return {

        restrict:'E',

        scope:{},

        controller:function($scope){

            $scope.foods=[];

            this.addApple=function(){

                $scope.foods.push('Apple');

            };

            this.addOrange=function(){

                $scope.foods.push('Orange');

            };

            this.addBanana=function(){

                $scope.foods.push('Banana');

            }

        },

        link:function(scope,element,attrs){

            element.bind('mouseenter',function(){

                console.log(scope.foods);

            });

        }

    }

});

app.directive('apple',function(){

    return {

        require:'food',

        link:function(scope,element,attrs,foodCtrl){

            foodCtrl.addApple();

        }

    }

});

app.directive('orange',function(){

    return {

        require:'food',

        link:function(scope,element,attrs,foodCtrl){

            foodCtrl.addOrange();

        }

    }

});

app.directive('banana',function(){

    return {

        require:'food',

        link:function(scope,element,attrs,foodCtrl){

            foodCtrl.addBanana();

        }

    }

});

</script>

</html>

Angular.js进阶的更多相关文章

  1. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  2. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  5. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  6. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  8. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  9. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

随机推荐

  1. MySQL数据库备份与还原

    备份数据库 1.使用mysqldump命令备份 备份一个数据库:mysqldump -u 用户名 -p密码 数据库名 [表名1,表名2...]>备份文件路径及名字.sql           如 ...

  2. arm汇编学习(三)

    一.ndk编译android上运行的c程序 新建个hello目录,底下要有jni目录,下面就是Android.mk文件 1.Android.mk文件内容如下: LOCAL_PATH:= $(call ...

  3. golang构造函数

    http://blog.jobbole.com/107442/?utm_source=blog.jobbole.com&utm_medium=relatedPosts https://gocn ...

  4. C/C++内存泄露检测

    以下测试基于的gcc版本: gcc (Ubuntu 4.8.4-2ubuntu1~14.04) 4.8.4Copyright (C) 2013 Free Software Foundation, In ...

  5. antd button

    引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...

  6. tree结构统一修改属性名（递归）

    1 //data为需要修改的tree,这里主要是为antd design 里面select规范数据 const ass = (data) => { let item = []; data.map ...

  7. 使用websploit在局域网全自动渗透

    原理为 websploit调用dnsdpoof进行dns欺骗配合神器metasploit的web_autopwn模块进行渗透:特点:过程基本全自动. 终端输入websploit打开websploit: ...

  8. ASN.1详解

    Chapter 4 ASN.1 4.1 网络数据表示及编码4.2 ASN.1的基本概念4.3 基本编码规则 4.1 网络数据表示及编码ASN.1(Abstract Syntax Notation 1) ...

  9. 复制collections

    use product-test; var cursor = db.user.find(); use product; while(cursor.hasNext()){db.user.insert(c ...

  10. C#检验IIS版本、SQL Server版本、SilverLight版本

    之前做一个小项目,使用C#检验这些软件的版本,到处找了一些代码,也能作用,记录一下,以防以后用到. 一.检验IIS版本 public static bool checkIIS(string destV ...