3

Please need help with this error "Cannot set property '$render' of undefined". I know that this question is already asked but i cant solve it.

    $scope.editmode = false;
$scope.toggleEditMode = function () {
    $scope.editmode = $scope.editmode === false ? true : false;

}

    directives.directive("contenteditable", function () {

return {

link: function(scope, element, attrs, ngModel) {

  function read() {
    ngModel.$setViewValue(element.html());
  }

  ngModel.$render = function() {
    element.html(ngModel.$viewValue || "");
  };

  element.bind("blur keyup change", function() {
    scope.$apply(read);
  });
}

}; });

    <tr dir-paginate="us in zdravstveniPostupci |  filter: {Postupak: nasUser} | orderBy:orderByField:reverseSort | itemsPerPage:selectedMenu" ng-dblclick="updateOsoba(us, selectMjesto )" on-long-press="updateOsoba(us, selectMjesto )" ng-click="odaberiOsobe(us,$index)" ng-attr-contenteditable="{{ editmode }}">

                        <td ng-repeat="key in draggableObjects" ng-if="key.visible"  >
                            <span ng-if="key.name!='Mjesta'"> {{us[key.name]}}</span>

                        </td>

                    </tr>

    <div class="col-md-4 center-block" style="position:fixed;top:36%;left:82%;" id="gumbicc">
<button type="button" class="btn  btn-responsive"  ng-click="toggleEditMode(); ShowHide()" >{{editmode ? 'Disable Editing' : 'Enable Editing'}}</button></div>
Ivan Luketić
  • 51
  • 1
  • 8

2 Answers2

0

If you are using ngModel in link function you should require it in directive

return {
   require: 'ngModel', // <---THIS
   link: function(scope, element, attrs, ngModel) {

  function read() {
    ngModel.$setViewValue(element.html());
  }

  ngModel.$render = function() {
    element.html(ngModel.$viewValue || "");
  };

  element.bind("blur keyup change", function() {
    scope.$apply(read);
  });
}
el vis
  • 1,302
  • 2
  • 16
  • 32
0

require ngModel in your directive. 

directives.directive("contenteditable", function () {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {

          function read() {
            ngModel.$setViewValue(element.html());
          }

          ngModel.$render = function() {
            element.html(ngModel.$viewValue || "");
          };

          element.bind("blur keyup change", function() {
            scope.$apply(read);
          });
        }
    }
}

You could refer to this existing SO post for a detailed explanation regarding ngModel.

Community
  • 1
  • 1
Ana Liza Pandac
  • 4,795
  • 2
  • 24
  • 36
  • then i get this error: Error: [$compile:ctreq] Controller 'ngModel', required by directive 'contenteditable', can't be found! – Ivan Luketić Jun 21 '16 at 06:31
  • @IvanLuketić correct me if i'm wrong, you want to make the value of us[key.name] editable right? – Ana Liza Pandac Jun 21 '16 at 06:53
  • its a table that i want make editable on button click – Ivan Luketić Jun 21 '16 at 07:19
  • I tried creating a [fiddle](https://jsfiddle.net/analiza641/pz81t1co/) by putting the `ng-model="us[key.name]"` and the directive in the `span` element instead of putting it on the ``. It's working but there's a problem with spaces and tabs interpreted as html entities. Also, don't know if this will help but there's an existing project [textAngular](https://github.com/fraywing/textAngular), you might want to check it out. – Ana Liza Pandac Jun 21 '16 at 09:02