JavaScript教程之Angular.js进阶

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之Angular.js进阶

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>

诗和远方success

栏目列表