<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>222-directive-ng</title>
<style type="text/css">
</style>
</head>
<body>
<div ng-app="testModule" ng-controller="testCtr">
<test-dire ></test-dire>
<!-- 上面这种写法就会报错，看控制台。因为我们在指令中require了ngModel，但是在标签中没有使用ng-model，那么就会报错 -->
<!-- <test-dire ng-model="say"></test-dire> -->
<button ng-click="joke()">窗前明月光</button>
</div>
<script src="../js/lib/angular.js"></script>
<script type="text/javascript">
angular.module("testModule",[])
.controller("testCtr",function($scope){
})
.directive("testDire",function(){
return {
restrict:"AE",
require:"ngModel",
template:'<div>{{say}}<ul ng-model="ssl"><li>{{ssl}}</li><li>2</li></ul></div>',
link:function(scope,elem,attr,ngModelCtr){
//scope.say = "niiss";
scope.ssl = "nihao";
//通过input 或 $setViewValue输入框的时候，会触发下面的回调
ngModelCtr.$parsers.push(function(viewValue){
if(typeof viewValue != "undefined"){
return "我说："+ viewValue;
}
});
ngModelCtr.$parsers.push(function(viewValue){
if(typeof viewValue != "undefined"){
return "它说："+ viewValue;
}
});
//通过js修改值得时候，会触发下面的回调
// ngModelCtr.$formatters.push(function(modelValue){
// console.log("~~~~~~~~~~~~~~");
// console.log(modelValue)
// if(typeof modelValue != "undefined"){
// //返回字符串给view,不改变模型值
// return "李白睡的香";
// }
// });
ngModelCtr.$setViewValue("hello");
//var h1Elem = document.getElementsByTagName("h1")[0];
// ngModelCtr.$render = function(){
// if(typeof scope.say != "undefined"){
// h1Elem.style.color = "red";
// }
// }
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="app.module" id="top">
<head>
<meta charset="utf-8" />
<title>指令的引用及ng-model的监听-2</title>
<script src="../js/lib/angular.js"></script>
<script>
angular.module("my.direct.mod", [])
.factory("myFactory", [function() {
return {
myFun: function() {
console.log("factory ： myFun!");
}
}
}])
.constant('graceButtonConfig', {
activeClass: 'active',
toggleEvent: 'click'
})
.directive("myDirective", ["myFactory", "graceButtonConfig", function(myFactory, graceButtonConfig) {
return {
restrict: "AE",
replace: true,
template: '<div>你好毒我好毒她豪赌 {{a}} <p>{{graceButtonConfig.active}}</p></div>',
controller: function($scope, $timeout) {
console.log("controller");
$timeout(function() {
$scope.myModel = 99;
}, 100);
},
link: function($scope) {
console.log("link");
myFactory.myFun();
}
}
}]);
var app = angular.module("app.module", ["my.direct.mod"])
.controller("mainCtrl", ["$scope", function($scope) {
$scope.a = 1000;
$scope.$watch("myModel", function(newVal, oldVal) {
alert(newVal);
alert(oldVal);
})
}])
</script>
</head>
<body ng-controller="mainCtrl">
<my-directive ng-model="myModel"></my-directive>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="app.module" id="top">
<head>
<meta charset="utf-8" />
<title>指令的引用及ng-model的监听-1</title>
<script src="../js/lib/angular.js"></script>
<script>
angular.module("my.direct.mod", [])
.factory("myFactory", [function() {
return {
myFun: function() {
console.log("factory ： myFun!");
}
}
}])
.constant('graceButtonConfig', {
activeClass: 'active',
toggleEvent: 'click'
})
.directive("myDirective", ["myFactory", "graceButtonConfig", function(myFactory, graceButtonConfig) {
return {
restrict: "AE",
replace: true,
template: '<div>你好毒我好毒她豪赌 {{a}} <p>{{graceButtonConfig.active = 200}}</p></div>',
controller: function($scope, $timeout) {
console.log("controller");
// $timeout(function() {
// $scope.myModel = 99;
// }, 100);
},
link: function($scope) {
console.log("link");
myFactory.myFun();
}
}
}]);
var app = angular.module("app.module", ["my.direct.mod"])
.controller("mainCtrl", ["$scope", function($scope) {
$scope.a = 1000;
$scope.$watch("myModel", function(newVal, oldVal) {
alert("newVal: "+newVal);
alert("oldVal: "+oldVal);
})
}])
</script>
</head>
<body ng-controller="mainCtrl">
<my-directive ng-model="myModel"></my-directive>
</body>
</html>