I'm trying to display some Edit icons when an Edit Mode link is clicked. So far i've tried ng-click with ng-class and ng-show and it doesn't respond.
Here's my html:
<div click-to-edit="questions.n1.name" class="row question"></div> <a href="" ng-click="editMode = !editMode">Enter edit mode</a> And the click-to-edit directive:
.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(); }; } }; }) I've also created a Plunker. On script.js, line 11, the ng-show is supposed to be triggered by the ng-click on the html (line 20).
What am I missing? Do I have to be inside the directive clicktoEdit to be able to trigger the ng-show?
