3
편집 모드 링크를 클릭하면 일부 편집 아이콘을 표시하려고합니다. 지금까지 ng-class와 ng-show로 ng-click을 시도했지만 응답하지 않습니다.ng-show on AngularJS가 작동하지 않습니다.
<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을 만든
여기 내 HTML입니다. script.js의 11 번째 줄에서 ng-show는 html을 클릭하면 시작됩니다 (20 행).
무엇이 누락 되었습니까? ng-show를 실행하려면 clicktoEdit 지시문 안에 있어야합니까?