将html附加到指令中的元素并使本地函数与其交互 [英] Append html to an element in directive and make a local function to interact with it
问题描述
在我的AngularJS应用程序中，我到处都有不同的复杂输入。例如，某些输入有一个指令，可以使用Google Places自动完成或使用Twitter Bootstrap自动完成。
In my AngularJS application, I have different complex inputs everywhere. For example, some inputs have a directive to use autocompletion with Google Places or with autocompletion from Twitter Bootstrap.
我正在寻找一种方法来制作一个显示当我们添加一些像iOS功能这样的文字时，擦除按钮。
I'm searching for a way to make a directive which displays an erase button when we add some text like iOS feature.
我做了这个，但是 scope.erase 没有开始， ng-show 也没有。
I made this one, but the scope.erase doesn't start, nor does the ng-show.
是否可以在文本输入后添加HTML在控制器内玩他们？
Is it possible to add HTML after the text input and "play" with them inside the controller?
我的测试：
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');
}
}
}
});
我不想使用模板，因为我的所有输入的HTML都非常不同。
I don't want to use a template because all of my inputs' HTML are really different.
推荐答案
您可以根据模型的值在指令的链接功能中创建自定义输入。如果您希望将元素绑定到模型或使用指令来构建它们，则应使用 $ compile （并且不要忘记使用模型调用已编译的模板）：
You can create custom inputs inside link function of your directive depending on values of the model. If you want that elements to be bind to model or use directives to build them, you should use $compile (and don't forget to call compiled template with model):
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
这篇关于将html附加到指令中的元素并使本地函数与其交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
