Databases
StackOverflow2013
Postsdbo
POAngular Template Directive fails when model updates
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular Template Directive fails when model updates
    primarykey
    data
    text
    <p>I'm trying to build a navigation menu using an AngularJs Directive. I'm using the superfish jQuery menu plugin. </p> <p>It works fine except for 2 issues.</p> <ol> <li>as soon as the model changes, the jQuery plugin fails.</li> <li>To make the plugin work, I had to set a timeout in the 'link' method of the directive. Which is not an elegant solution.</li> </ol> <p>Here's a jsFiddle: <a href="http://jsfiddle.net/ashraffayad/xRB9u/" rel="nofollow">http://jsfiddle.net/ashraffayad/xRB9u/</a></p> <pre><code>var myApp = angular.module('myApp', []); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); myApp.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) { return { restrict: 'E', //Element scope: true, link: function (scope, element, attrs) { scope.$watch(attrs.menuData, function (val) { var template = angular.element('&lt;ul class="sf-menu" id="parentTreeNavigation"&gt;&lt;li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active &amp;&amp; node.active==true, \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="{{node.href}}" &gt;{{node.text}}&lt;/a&gt;&lt;sub-navigation-tree&gt;&lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;'); var linkFunction = $compile(template); linkFunction(scope); element.html(null).append(template); }, true); setTimeout(function(){ $('.sf-menu').superfish(); },1000); } } }]); myApp.directive('subNavigationTree', ['$compile', function ($compile) { return { restrict: 'E', //Element scope: true, link: function (scope, element, attrs) { scope.tree = scope.node; if (scope.tree.children &amp;&amp; scope.tree.children.length) { var template = angular.element('&lt;ul class="dropdown "&gt;&lt;li ng-repeat="node in tree.childrehttp://jsfiddle.net/ashraffayad/TwZ25/#runn" node-id={{node.' + attrs.nodeId + '}} ng-class="{active:node.active &amp;&amp; node.active==true, \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-unsafe="node.text"&gt;&lt;/a&gt;&lt;sub-navigation-tree tree="node"&gt;&lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;'); var linkFunction = $compile(template); linkFunction(scope); element.replaceWith(template); } else { element.remove(); } } } }]); function MyCtrl($scope) { $scope.changemodel = function(){ $scope.model[0].text = "some other text"; }; $scope.model = [ {"text":"someText", "href":""}, {"text":"someText", "href":""}, {"text":"someText", "href":"", "children":[{}] } ]; $scope.name = 'Superhero'; } </code></pre> <p>and the html:</p> <pre><code>&lt;div ng-controller="MyCtrl"&gt;Hello, {{name}}! &lt;button ng-click="changemodel()"&gt;change model&lt;/button&gt; &lt;nav-menu menu-data="model"&gt;&lt;/nav-menu&gt; &lt;/div&gt; </code></pre> <p>note: for some reason jsFiddle doesn't like it when I add children array to the model. But the example works as it does on my pc without the error on jsFiddle.</p> <p>Thank you.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAshraf Fayad
    1. USAshraf Fayad
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COSometimes jQuery and Angular don't always go well together. The setTimeout, while not elegant is often necessary because you have two frameworks fighting over the DOM. I'd recommend that you break away from the jQuery plug-in and use Toggle Dropdown from Angular-UI: http://angular-ui.github.io/bootstrap/#/dropdownToggle
      singulars
      1. POAngular Template Directive fails when model updates
      1. USLangdon
    2. COThanks for the info. I'm using Angular-UI already and it's great. But I need a hierarchical drop-down menu for the main website navigation. And the Toggle Dropdown is just one level.
      singulars
      1. POAngular Template Directive fails when model updates
      1. USAshraf Fayad
    3. COUnderstood. If you fix your fiddle, I can probably help (check the console).
      singulars
      1. POAngular Template Directive fails when model updates
      1. USLangdon
 

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