个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的 AngularJS 应用程序中，我到处都有不同的复杂输入。例如，某些输入具有使用 Google 地方信息自动完成功能或 Twitter Bootstrap 自动完成功能的指令。
我正在寻找一种方法来制作一个指令，当我们添加一些文本(如 iOS 功能)时，该指令会显示删除按钮。
我做了这个，但是 scope.erase 没有启动，ng-show 也没有启动。
是否可以在文本输入后添加 HTML 并在 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 都非常不同。
最佳答案
您可以根据模型的值在指令的链接函数内创建自定义输入。如果您希望将这些元素绑定(bind)到模型或使用指令来构建它们，您应该使用 $compile (并且不要忘记使用模型调用已编译的模板):
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);
}
}
});
关于javascript - 将 html 附加到指令中的元素并创建一个与其交互的本地函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21452706/
25
4
0
我关注了 tutorial on creating a popup for an add-on在 Firefox 中，效果很好。 我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
我有一些视频，我需要连接一个标题并添加一些覆盖，问题是我需要先做覆盖，否则时间不正确，然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是，我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么？它是为了“模拟”JVM，以便您可以在不部署/启动代码的情况下测试您的代码吗？它是一个
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
我正在尝试从数组中附加具有多个值的元素，但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方 这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
我有一个问题，我已经解决了，但它太烦人了。 我有一个 js 代码，当使用“追加”按下按钮时，它会放下一些 html 代码，并且通过该代码，我为 x 按钮提供了一个 id，并为容器元素提供了一个 id。
我想逐行读取文件，并且每一行可能都有很多字符。 这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
我有一个网站，每次用户登录或注销时，我都会将其保存到文本文件中。 如果不存在，我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗？我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间，希
我有一个字符串 big_html，我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
有没有办法附加 jQuery 事件处理程序，以便在任何先前附加的事件处理程序之前触发该处理程序？我遇到了this article ，但代码不起作用，因为事件处理程序不再存储在数组中，而这正是他的代码所
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
我想开发一个仅针对特定域激活的扩展。 我不希望它在不浏览此特定域时出现在浏览器菜单中。 有可能这样做吗？ 最佳答案 可能：对于菜单，您可以添加一个弹出窗口侦听器，用于检查当前加载的URL（docs f
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
我尝试了以下代码，但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时，它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+
我是一名优秀的程序员,十分优秀！