嗨我有一个指令,当我把它放在普通模板中时,它可以正常工作。但是,当我把它放在一个链接到具有隔离范围的角度指令的模板中时。传递的值访问器无法正确更新。
我想知道是否有人能看到明显错误的指令。
我的指示fyi我没写这个:
'use strict';
angular.module('zendantennesApp')
.directive('zendantennesHoverInput', function($parse, $compile) {
return {
scope: {
accessor: '@model',
placeholder: '@',
confirm: '&onConfirm'
},
restrict: 'A',
replace: true,
compile: function(element, attrs) {
var classes = attrs.classes || "";
var hoverInput = $(
"<zendantennes-hover-input class='" + classes + "'>" +
"<div class='input-group' ng-class='{focus: focus}'>" +
"<span class='input-group-addon'>" +
" <span class='icon'></span>" +
"</span>" +
"<div class='input-group-controls'>" +
" <button type='button' class='btn-save' ng-click='save()'><span class='icon'></span></button>" +
" <button type='button' class='btn-cancel' ng-click='cancel()'><span class='icon'></span></button>" +
"</div>" +
"</div>" +
"</zendantennes-hover-input>"
);
element.replaceWith(hoverInput);
element.removeAttr('zendantennes-hover-input');
element.attr("stop-propagation");
hoverInput.find('.input-group').prepend(element);
return function($scope, element, attributes) {
element.find('input').attr("ng-model", "value"); // To be sure the ng-value will be replaced afte the compile cycle
$compile(angular.element(element))($scope); // Compile the manipulated HTML element
var input = element.find('input');
var controls = element.find('.input-group-controls');
if (input === "") {
throw new Error("The Zendantennes double click input directive should have a input element!");
}
input.focus(function() {
if (!$scope.focus) {
$scope.focus = true;
$scope.$digest();
}
});
input.focusout(function() {
if ($scope.autosave) {
$scope.save();
}
if ($scope.focus) {
$scope.focus = true;
$scope.$digest();
}
});
// method to save and blur the input field
input.keyup(function($event) {
if ($event.keyCode === 13) {
$scope.autosave = true;
$($event.target).blur();
}
if ($event.keyCode === 27) {
$scope.cancel();
$($event.target).blur();
}
});
controls.mouseenter(function() {
$scope.autosave = false;
$scope.$digest();
});
controls.mouseleave(function() {
$scope.autosave = true;
$scope.$digest();
});
}
},
controller: function ($scope, $parse) {
var accessor = $parse($scope.accessor);
$scope.value = angular.copy(accessor($scope.$parent));
$scope.focus = true;
$scope.autosave = true;
$scope.save = function() {
accessor.assign($scope.$parent, $scope.value); // We have to set the scope variable directly on the parent scope to prevent race conditions
$scope.confirm();
};
$scope.cancel = function() {
$scope.value = accessor($scope.$parent);
}
}
}
});
如何在其他isolate scoped指令的模板中调用它:
<td><input title="{{meetpunt.zIndex}}" type='text' class='form-control' model="meetpunt.zIndex" on-confirm='updateMeetpunt(meetpunt)'
placeholder="{{'dossier.panel.map.meetpunt.placeholder' | translate}}" zendantennes-hover-input></td>
任何帮助将不胜感激。
提前谢谢