ng-click 上的 ng-show 不适用于 AngularJS答案

【问题标题】：ng-show on ng-click not working with AngularJSng-click 上的 ng-show 不适用于 AngularJS
【发布时间】：2014-03-02 15:57:31
【问题描述】：

我试图在单击编辑模式链接时显示一些编辑图标。到目前为止，我已经尝试使用 ng-class 和 ng-show 进行 ng-click，但它没有响应。

这是我的html：

<div click-to-edit="questions.n1.name" class="row question"></div>
    <a href="" ng-click="editMode = !editMode">Enter edit mode</a>

还有点击编辑指令：

.directive("clickToEdit", function () {
var editorTemplate = '' +
'<div class="click-to-edit">' +
    '<div ng-hide="view.editorEnabled">' +
        '{{value}} ' +
        '<a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="enableEditor()"></a>' +
    '</div>' +
    '<div ng-show="view.editorEnabled">' +
        '<input type="text" class="" ng-model="view.editableValue">' +
        '<a class="glyphicon glyphicon-ok" href="#" ng-click="save()" ></a>' +
        '<a class="glyphicon glyphicon-remove" ng-click="disableEditor()"></a>' +
    '</div>' +
'</div>';

return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
    value: "=clickToEdit",
},
link: function (scope, element, attrs) {
    scope.view = {
        editableValue: scope.value,
        editorEnabled: false
    };

    scope.enableEditor = function () {
        scope.view.editorEnabled = true;
        scope.view.editableValue = scope.value;
        setTimeout(function () {
            element.find('input')[0].focus();
            //element.find('input').focus().select(); // w/ jQuery
        });
    };

    scope.disableEditor = function () {
        scope.view.editorEnabled = false;
    };

    scope.save = function () {
        scope.value = scope.view.editableValue;
        scope.disableEditor();
    };

    }
};
})

我还创建了一个Plunker。在 script.js 第 11 行，ng-show 应该由 ng-click 触发 html（第 20 行）。

我错过了什么？我是否必须在指令 clicktoEdit 中才能触发 ng-show？

【问题讨论】：

标签： javascript angularjs angularjs-ng-click using-directives

【解决方案1】：

您的指令具有隔离范围，因此 editMode 在那里不可用。此问题的最简单解决方法是显式引用父范围属性：

<a class="glyphicon glyphicon-pencil" ng-show="$parent.editMode" ng-click="enableEditor()"></a>

演示：http://plnkr.co/edit/8M98LGOfdRrBp5IaaGKZ?p=preview

【讨论】：