wKioL1Xj74DBedJqAAJZEx0-ld4918.jpg

效果如上图.代码如下

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta name="generator"
        content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
        <script type="text/javascript" src="bower-angular-master/angular.js"></script>
        <script type="text/javascript" src="userinfomodule.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">双向数据绑定</div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
                            <div class="form-group">
                                <label class="col-md-2 control-label">邮箱</label>
                                <div class="col-md-10">
                                    <input type="email" ng-model="userInfo.email" class="form-control"
                                    placeholder="推荐使用126邮箱" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">密码</label>
                                <div class="col-md-10">
                                    <input type="password" ng-model="userInfo.password" class="form-control"
                                    placeholder="只能是数字、字母、下划线" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <div class="checkbox">
                                        <label>
                                        <input type="checkbox" ng-model="userInfo.autoLogin" />自动登录</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                <button class="btn btn-default" ng-click="getFormData()">获取表单值</button> 
                                <button class="btn btn-default" ng-click="setFormData()">设置表单值</button> 
                                <button class="btn btn-default" ng-click="resetFormData()">重置表单值</button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


JS代码如下

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

userInfoModule.controller('UserInfoCtrl', ['$scope', function($scope){
		$scope.userInfo = {
			email: 'umgsai@126.com',
			password: "123456",
			autoLogin: true
		};
		//$scope.user = "test";
		$scope.getFormData = function(){
			console.log($scope.userInfo);
		};
		
		$scope.setFormData = function(){
			$scope.userInfo = {
				email: "umgsai@163.com",
				password:　"123456789",
				autoLogin: false
			}
		};
		
		$scope.resetFormData = function(){
			$scope.userInfo = {
				email: 'umgsai@126.com',
				password: "123456",
				autoLogin: true
			};
		};
}])

再看一个小示例

wKioL1XkCujRaFNzAAEsRmSkn0s647.jpg

代码如下

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
        <script type="text/javascript" src="bower-angular-master/angular.js"></script>
        <script type="text/javascript" src="derective.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div class="row">
			<div class="col-md-3">
				<superman strength>力量</superman>
			</div>	
        </div>
		<div class="row">
			<div class="col-md-3">
				<superman strength speed>力量 + 敏捷</superman>
			</div>	
        </div>
		<div class="row">
			<div class="col-md-3">
				<superman strength speed light>力量 + 敏捷 + 发光</superman>
			</div>	
        </div>
    </body>
</html>

JS代码如下

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

app.directive("superman",function(){
	return{
		scope: {},
		restrict: "AE",
		controller: function($scope){
			$scope.abilities = [];
			this.addStrength = function(){
				$scope.abilities.push("strength");
			};
			this.addSpeed = function(){
				$scope.abilities.push("speed");
			};
			this.addLight = function(){
				$scope.abilities.push("light");
			};
		},
		link: function(scope, element, attrs){
			element.addClass("btn btn-primary");
			element.bind("mouseenter",function(){
				console.log(scope.abilities);
			});
		}
	}
});

app.directive("strength", function(){
	return{
		require: '^superman',//strength指令依赖与superman
		link: function(scope, element, attrs, supermanCtrl){
			supermanCtrl.addStrength();
		}
	}
});

app.directive("speed", function(){
	return{
		require: '^superman',
		link: function(scope, element, attrs, supermanCtrl){
			supermanCtrl.addSpeed();
		}
	}
});

app.directive("light", function(){
	return{
		require: '^superman',
		link: function(scope, element, attrs, supermanCtrl){
			supermanCtrl.addLight();
		}
	}
});