效果如上图.代码如下
<!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
};
};
}])再看一个小示例
代码如下
<!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();
}
}
});
