单击“编辑模式”链接时，我试图显示一些“编辑”图标。到目前为止，我已经尝试用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行上，应该通过在html上单击ng来触发ng-show（第20行）。
我想念什么？我是否必须在指令clicktoEdit中才能触发ng-show？
您的指令具有隔离范围，因此editMode在那里不可用。此问题的最简单解决方案是显式引用父范围属性：
<a class="glyphicon glyphicon-pencil" ng-show="$parent.editMode" ng-click="enableEditor()"></a>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句