3

我试图在单击编辑模式链接时显示一些编辑图标。到目前为止,我尝试用ng-class和ng-show单击ng,并且它没有响应。ng-click ng-click不能与AngularJS一起使用

这里是我的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。在第11行的script.js中,ng-show应该是通过在html(第20行)上单击ng来触发的。

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

回答

4

您的指示已隔离范围,因此editMode在此处不可用。这个问题的最简单的解决方法是显式引用父作用域属性:

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

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