javascript - funciones - jquery
Agregue html a un elemento en la directiva y haga una función local para interactuar con él (1)
En mi aplicación AngularJS, tengo diferentes entradas complejas en todas partes. Por ejemplo, algunas entradas tienen una directiva para usar autocompletar con Google Places o con autocompletar desde Twitter Bootstrap.
Estoy buscando una manera de hacer una directiva que muestre un botón de borrado cuando agregamos un texto como la característica de iOS.
Hice este, pero el scope.erase no se inicia, ni el ng-show .
¿Es posible agregar HTML después de la entrada de texto y "jugar" con ellos dentro del controlador?
Mi prueba:
app.directive(''eraseBtn'', function($parse, $compile){
return {
require: ''ngModel'',
restrict: "A",
transclude: true,
link : function(scope, element, attrs, model){
element.parent().append(''<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>'');
scope.erase = function(){
console.log(''Erase test'');
}
}
}
});
No quiero usar una plantilla porque todos los HTML de mis entradas son realmente diferentes.
Puede crear entradas personalizadas dentro de la función de enlace de su directiva en función de los valores del modelo. Si desea que los elementos estén vinculados al modelo o use directivas para construirlos, debe usar $compile (y no olvide llamar a la plantilla compilada con el modelo):
HTML
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="demoController">
<div demo-directive ng-repeat="input in inputs"></div>
</body>
</html>
JavaScript
angular.module(''demo'', []).
controller(''demoController'', function($scope) {
$scope.inputs = [{
inputType: ''checkbox'',
checked: true,
label: ''input 1''
}, {
inputType: ''text'',
value: ''some text 1'',
label: ''input 2''
}];
$scope.doSomething = function() {
alert(''button clicked'');
};
}).
directive(''demoDirective'', function($compile) {
return {
template: ''<div><label>{{input.label}}: </label></div>'',
replace: true,
link: function(scope, element) {
var el = angular.element(''<span/>'');
switch(scope.input.inputType) {
case ''checkbox'':
el.append(''<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>'');
break;
case ''text'':
el.append(''<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=/'/'; doSomething()">X</button>'');
break;
}
$compile(el)(scope);
element.append(el);
}
}
});
Plunker: http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview