Question

我试图在AngularJS中创建一个动态文本字段，就像我在许多网站上看到的那样。当您将鼠标悬停在字段上时，可以编辑＆＃39;按钮应该出现，如果您点击“编辑”按钮按钮你可以改变价值和＆＃39;编辑＆＃39;更改为“保存”＃39;按钮。如果单击文本字段之外的任何位置，该字段将丢弃所有更改并返回其初始状态。

查看下面的标记，点击“随时随地”，然后点击此处＆＃39;指令（由另一个堆栈溢出用户提供给另一个question）似乎无论何时on＆lt; onClicked（）＆＃39;函数在“鼠标”之后调用。事件。

<div ng-mouseenter="onEnter()" ng-mouseup="onClicked()" ng-mouseleave="onExit()">
    <div class="row">
    <div class="col-sm-9 block">
        <span ng-transclude></span>
    </div>
    <div class="col-sm-3 block" click-anywhere-but-here="onClickElsewhere()">
        <div ng-if="normal()"></div>
        <div ng-if="focused()"><button class="btn btn-default">Edit <span class="glyphicon glyphicon-pencil"></span></button></div>
        <div ng-if="updating()"><button class="btn btn-default">Update  <span class="glyphicon glyphicon-ok"></span></button></div>
    </div>
    </div> 
</div>

如果您查看下面的实际onClicked函数，则问题是由写入$scope.state变量（分配给值normal或updating时）引起的：

angular.module('myApp')
.directive('mutableWidget', [ function() {
    return {
        transclude: true,
        templateUrl: window.grailsSupport.assetsRoot + "app/components/mutable-widget/mutable-widget.html",
        restrict: 'A',
        scope: true,
        link: function($scope, $element, $attribs) {
            $scope.state = "normal";
            ...
            $scope.onClicked = function() {
                if($scope.state === "updating") {
                    $scope.state = "normal";
                } else {
                    $scope.state = "updating";
                }
                console.log("on click called state " + $scope.state);
            };
        }
    };
}]);

例如，如果我在if / else中注释掉语句，那么click-anywhere-but-here指令将按预期执行。代码在这里：

angular.module('myApp')
.directive('clickAnywhereButHere', function($document, $parse) {
    return {
        restrict: 'A',
        scope: {
            callback : '&clickAnywhereButHere'
        },
        link: function(scope, element, attr, ctrl) {
            var handler = function(event) {
                if (!element[0].contains(event.target)) {
                    console.log("doesn't contain target");
                    scope.$apply(scope.callback(event));
                 } else {
                     console.log("does contain target");
                 }
            };

            $document.on('click', handler);
            scope.$on('$destroy', function() {
                $document.off('click', handler);
            });
        }
    }
});

任何人都可以解释为什么“点击 - 在任何地方 - 但在这里”＆＃39;指令没有执行，需要做什么才能产生所需的行为？关于如何使用像Javascript这样的语言实际调试这些问题的一些小建议也将非常受欢迎。当我遇到这些问题时，解决它们往往相当于试验和错误，并在开发工具控制台中输出console.log消息。

提前致谢！

更改AngularJS范围变量阻止指令运行？

0 个答案: