我一直在尝试创建一个指令，可以将其任意添加到现有表单（作为属性），从而使该表单在单击附近的触发链接时成为弹出窗口。我已经使指令可以工作一次，但是一旦我再次单击链接，基础数据就不会更改，并且按钮（例如“关闭”）也将停止工作。
可以在这里找到一个放声大笑的人：http ://plnkr.co/edit/2Zyg1bLearELpofeoj2T?p=preview
重现步骤：1.单击链接，2.更改文本（请注意，链接文本也会更改），3.单击关闭（确定当前不能正确执行操作），4.再次单击链接，5。尝试更改文本/单击“关闭”，但没有任何效果...
我读过一个问题，就是引导程序中的弹出窗口已分离/附加到DOM，但是我仍然不知道如何解决此问题。我还希望避免使用第三方库（例如angular-ui），因为我希望避免这些开销。
任何帮助是极大的赞赏。
更新由于瓦萨卡（Vasaka）的提示，我得以进一步进步。问题稍有改变，因为嵌套指令现在似乎没有从中受益$compile，即，我不认为它附加在作用域上。
要重现该行为，请单击日期（下面的链接），单击弹出窗口中的日期（日期应递增），然后关闭弹出窗口。再次重复这些步骤，您会发现增加日期不再有效。我试图添加一些内容$compile(element.contents())(scope)以尝试也编译嵌套指令simple-date-picker，但这并不能解决问题。
这是更新的插件：http ://plnkr.co/edit/2Zyg1bLearELpofeoj2T?p=preview
以及更新的代码：
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-require="[email protected]" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<style>
body {margin-top:40px; margin-left:40px;}
</style>
<script>
var module = angular.module('module', []);
module.directive('simpleDatePicker', function($compile) {
return {
restrict: 'E',
scope: {
date: '='
},
replace: true,
template: '<div ng-click="date.setDate(date.getDate()+5)"> {{ date }} </div>',
}
});
module.directive('myForm', function() {
return {
restrict: 'E',
scope: {
popover: '=?',
value: '='
},
transclude: true,
replace: true,
template:
'<div>' +
'<a href="" ng-transclude></a>' +
'<form ng-submit="submit($event)" ng-hide="popover && !formVisible" ng-attr-popover="{{ popover }}" class="form-inline">' +
'<simple-date-picker date="value"></simple-date-picker>' +
'<div ng-hide="!popover">' +
'<button type="submit" class="btn btn-primary">OK</button>' +
'<button type="button" class="btn" ng-click="formVisible=false">close</button>' +
'</div>' +
'<div class="editable-error help-block" ng-show="error">{{ error }}</div>' +
'</form>' +
'</div>',
controller: function($scope, $element, $attrs) {
$scope.formVisible = false;
$scope.submit = function(evt) {
$scope.formVisible = false;
}
}
}});
module.directive('popover', function($compile) {
return {
restrict: 'A',
scope: false,
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
},
post: function postLink(scope, iElement, iAttrs, controller) {
var attrs = iAttrs;
var element = iElement;
// We assume that the trigger (i.e. the element the popover will be
// positioned at is the previous child.
var trigger = element.prev();
var popup = element;
// Connect scope to popover.
trigger.on('shown', function() {
var tip = trigger.data('popover').tip();
$compile(tip)(scope);
scope.$digest();
});
trigger.popover({
html: true,
content: function() {
scope.$apply(function() {
scope.formVisible = true;
});
return popup;
},
container: 'body'
});
scope.$watch('formVisible', function(formVisible) {
if (!formVisible) {
trigger.popover('hide');
}
});
if (trigger.data('popover')) {
trigger.data('popover').tip().css('width', '500px');
}
}
}
}
};
});
function MyCtrl($scope) {
$scope.value = new Date(0);
}
angular.element(document).ready(function() {
angular.bootstrap(document, ['module']);
});
</script>
</head>
<body ng-controller="MyCtrl">
<my-form popover="true" value="value">
{{ value }}
</my-form>
</body>
</html>
我想我解决了两个问题。如果有人感兴趣，我将快速总结一下我的发现：
1）根据Vasaka的建议，tip弹出窗口的需绑定到范围（$compile(tip)(scope)）。
2）第二个问题是$compile()（1）中的调用未编译嵌套指令。这是由于已replace: true在的（嵌套）指令定义对象中进行了设置simple-date-picker。由于最初替换了原始指令标记，因此任何后续$compile运行都将不再将简单的日期选择器识别为Angular指令。
最终的矮人（唯一的区别是replace: false）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句