在具有隔离范围的另一个指令中,指令不会正确更新值访问器

时间:2015-09-22 12:59:00

标签: angularjs angularjs-directive

嗨我有一个指令,当我把它放在普通模板中时,它可以正常工作。但是,当我把它放在一个链接到具有隔离范围的角度指令的模板中时。传递的值访问器无法正确更新。

我想知道是否有人能看到明显错误的指令。

我的指示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>

任何帮助将不胜感激。

提前谢谢

0 个答案:

没有答案