Thursday 15 January 2015

angularjs - Edit in Place Directive with Button -


I am implementing an editing-in-place functionality where the user is editable after the user clicks on a button Go. Here are two instructions:

Directive for button:

 . Directive ('editbutton', function) {return {restrict: 'a', template: & lt; Div ng-hyde = "editorEnabled" gt; '+' & lt; button class = "btn btn-small enableEditor (item)" = ng-click "" & gt; '+' & lt; i class = "icon Edit "& gt; & lt; / i & gt; '+' & lt; / button & gt; '+'  gt; ng; div ng show =" editorEnabled & gt; '+' & Lt; Button class = "btn btn-small" ng-click = "save (item)" & gt; '+' & Lt; I class = "icon-ok" & gt; & Lt; / I & gt; '+' & Lt; / Button & gt; '+' & Lt; / Div & gt; ', Link: function (scope, elm, attrs, ctrl) {console.log ("butotn"); Scope.editorEnabled = false; Scope.enableEditor = function {scope.editorEnabled = true} scope.disableEditor = function () {Scope.editorEnabled = false;} scope.save = function () {// client side and server side scope.disableEditor () ;}}};});   

To edit text in place:

  Angular Modules ('Solarcotta DICI', []). Instructions ('editfield', function) {return {restricted: 'a', // scope: {value: "= editfield", heirs: '@ editEnabled'}, transclude: true, template: '& lt; Duration ng-hyde = "editorEnabled" ng-transclude & gt; & Lt; / Span & gt; '+ // Viewable area' & lt; Period ng show = "editorEnabled" & gt; & Lt; Input class = "input-medium" ng model = "value" & gt; & Lt; / Span & gt; ', // editable field link: function (scope, elm, ethers, CTLL) {// nothing here}};})   

and HTML: < Pre> & lt; Tr ng-repeat = "item in item" & gt; & Lt; TD & gt; & Lt; A href = "" ng-click = "filter_fund (item)" & gt; & Lt; Span editfield = "item.fields.name" & gt; {{Item.fields.name}} & lt; / Span & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Span editfield = "item.fields.address" & gt; {{Item.fields.address}} & lt; / Span & gt; & Lt; / TD & gt; & Lt; Td style = "text-align: center" ng-show = "editable" & gt; & Lt; Span editbutton & gt; & Lt; / Span & gt; & Lt; / Td>

The problem is that the editor enabled area can not be reached when I apply my own work to retrieve the name. I tried to use @and = to capture the "inherited" radius but it is not able to understand how.

To prepare the input field using the objective = editfield, after which the active scope has been given to the editor that has been shared with the button that enables and disables it. However, an editor is not enabled in the scope.

Any help would be appreciated.

There are two main points to do this:

  1. < P> Working with a separate scope - You must pass all the required data through attributes in your example, be it editfield and editorEnabled needed. Ex:
      & lt; Span editfield = "item.fields.name" editor-enabled = "enable editor" & gt;   

    and in the instructions:

      scope: {value: "= editfield", editor active: '='},   
  2. Do not use camels in special names while passing data for instructions!

    This will not work :

      & lt; Span editfield = "user.name" Editor Enabled = "editorEnabled" & gt;   

    P>

No comments:

Post a Comment