Databases
StackOverflow2013
Postsdbo
POAngularJS : Toggle to modify attribute in directive
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS : Toggle to modify attribute in directive
    primarykey
    data
    text
    <p>In the project I am working on, I am applying a ui-sort via Angular on a to-do list and am trying to get a toggle to work for when a user is editing tasks. My current method of testing this toggle is employing the use of a button to toggle sorting on and off.</p> <p>My strategy is this: Employ an angular directive to generate an initial template with sorting on. Add a button which, when clicked, modifies a scope variable in the controller ($scope.sortingEnabled) to toggle between true and false. Inside my directive, I have a watch set on 'sortingEnabled' in a link function to add/remove the sorting attribute from a .</p> <p>Here is the in todo.html before I tried employing a directive: sortableOptions is a function written to re-order the todos on internal records.</p> <pre><code>&lt;ul class="unstyled" ng-model="todos" ui-sortable="sortableOptions"&gt; &lt;!-- list items here via ng-repeat --&gt; &lt;/ul&gt; </code></pre> <p>The following is the code in todo.html after my directive: </p> <pre><code>&lt;sortable&gt;&lt;/sortable&gt; </code></pre> <p>And my current draft for the directive inside todo-directives.js:</p> <pre><code>app.directive('sortable', function() { var innerHtml = '&lt;li ng-repeat="todo in todos" class="item"&gt;' + '&lt;span ng-model="todo.name" &gt;{{todo.name}}&lt;/span&gt; ' + '&lt;/li&gt;'; var link = function (scope, element, attrs) { scope.$watch('sortingEnabled', function() { if(scope.sortingEnabled === true) { element.contents().attr("ui-sortable", "sortableOptions"); //needed else ui-sortable added as a class for &lt;ul&gt; initially for //some reason element.contents().removeClass("ui-sortable"); } else { element.contents().removeAttr("ui-sortable"); //needed else ui-sortable added as a class for &lt;ul&gt; initially for //some reason element.contents().removeClass("ui-sortable"); } }); }; return { restrict: 'E', transclude: true, template: '&lt;ul class="unstyled" ng-model="todos" ui-sortable="sortableOptions" ng-transclude&gt;' + innerHtml + '&lt;/ul&gt;', link: link }; }); </code></pre> <p>This code works in the source code view of Chrome's debugger, but the view does not properly refresh. I have tried scope.$apply() within the watch function but get a $digest already running error. I have also tried $compile, but my understanding of how that works is severely lacking, so I get errors of which I do not remember. Am I missing something crucial, or doing things incorrectly? I am unsure, as my understanding is low, being that I have been leaning Angular for a few weeks. Any help would be greatly appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJohn Slegers
    1. USryanlutgen
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAngularJS : Toggle to modify attribute in directive
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload