AngularJS 20141027 Directivas
HTML
<div ng-app="myApp" ng-controller="Ctrl1">
<input type="text" ng-model="test" />
<div dir="" un-valor="claseAngular"
class="red" atributo-uno="test">
</div>
<select ng-model="departamento">
<option value="Lima">Lima</option>
<option value="Cajamarca">Cajamarca</option>
<option value="Cuzco">Cuzco</option>
</select>
<select ng-model="priority" >
<option value="Lima">Lima</option>
<option value="Cajamarca">Cajamarca</option>
<option value="Cuzco">Cuzco</option>
</select>
</div>
JavaScript
angular.module("myApp", []);
angular.module("myApp")
.controller("Ctrl1", ["$scope", function($scope){
$scope.test = "valor";
$scope.$watch("departamento", function(nv, ov) {
if (nv == "Lima") {
alert("Eres de Lima, No eres bienvenido");
$scope.departamento = ov;
}
});
$scope.bienvenida = function(mensaje){
alert("hola" + mensaje);
};
}]);
angular.module("myApp")
.directive("dir", [function(){
return {
restrict: "A",
scope: {
atributoUno: "=",
mensaje:"&"
},
template: "<span>{{prueba}}</span>" + "<button ng-click=\"mensaje({nom:'seergio'})\">"+"clickeame"+"</button>"+"</span>",
link: function($scope, $el, $attrs){
$scope.prueba = $scope.atributoUno;
$el.css("color", $attrs.class);
$scope.$watch("atributoUno", function(val, old) {
$el.append("<div>" + old + " - " + val + "</div>");
});
}
};
}]);
angular.module("myApp")
.directive("priority", [function(){
return {
restrict: "A",
link: function($scope, $el, $attrs){
$el.on()
}
};
}]);