angular_directive动感超人
<html ng-app="superModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="angular-1.2.26/angular.js"></script>
<script type="text/javascript" src="superman.js"></script>
</head>
<body>
<div>
<superman>superman111</superman>
</div>
<div>
<superman strength>superman + strength</superman>
</div>
<div>
<superman speed>superman + speed</superman>
</div>
<div>
<superman light>superman + light</superman>
</div>
<div>
<superman strength speed>superman strength + speed</superman>
</div>
<div>
<superman strength speed light>superman strength + speed + light</superman>
</div>
</body>
</html>
var superModule = angular.module("superModule", []);
superModule.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) {
console.log('superman');
//element.addClass('btn btn-primary');
element.bind('mouseenter', function() {
console.log(scope.abilities);
});
}
}
});
superModule.directive("strength", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
console.log('strength');
supermanCtrl.addStrength();
}
}
});
superModule.directive("speed", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
console.log('spead');
supermanCtrl.addSpeed();
}
}
});
superModule.directive("light", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
console.log('light');
supermanCtrl.addLight();
}
}
});