如何在我的angularjs指令中切换属性的值，如contenteditable？

Posted 2021-05-04

你看到我的指令切换（true / false）一个contenteditable元素的状态。如果我将“可编辑”var放入ng-class中，它会正确更改。但是我无法在点击时更改属性的值。我怎么能解决这个问题，我在这里缺少什么？

app.directive('ContentEditable', function() {
  return {
    scope: {
      contenteditable: '@'
    },
    restrict: 'E',
    template: '<div contenteditable="{editable}" ng-click="toggleEdit()" ng-transclude></div>',
    transclude: true,
    replace: true,


    link: function($scope) {
      var state = $scope.editable;
      $scope.editable = state === undefined ? false : state;

      $scope.toggleEdit = function(){
        $scope.state = !$scope.state;
        $scope.editable = $scope.state;
      };
    }
  };

});

答案

您需要围绕绑定属性值的双重parens：

contenteditable="{{editable}}"

http://jsfiddle.net/x918ewLo/

另一答案

您可以使用以下格式为我工作

<div id="editableContent" ng-attr-contenteditable="{{editmode}}" ng-bind-html="Content"  ng-style="myStyle">