Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm new to Angular and I have hit a small problem. I would like to set different menus depending on the user being authenticated or not. Depending on the status laravel returns different menu structures (html).

Here's my HTML for the main menu:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="MenuCtrl">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#start" class="navbar-brand" href="#"><img src="/image"></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li ng-bind-html="firstoption" ng-class="{active:isActive('/firstoption')}">{{ firstoption }}</li>
          <li ng-bind-html="secondoption" ng-class="{active:isActive('/secondoption')}" class="dropdown">
            {{ secondoption }}
          </li>

        </ul>

      </div><!--/.nav-collapse -->
    </div>
  </div>

Heres my Controller: The backend returns a json with the html. The reason why I want to do it like that has also to do with user rights. Depending on different rights, different options are shown in the menu.

AppControllers.controller('MenuCtrl', ['$scope', '$http', '$sce', '$location',  
  function ($scope, $http, $sce, $location) {

      $scope.isActive = function(route) {
        return route === $location.path();
      }

      $scope.firstoption = "";
      $scope.secondoption = "";

      var getMenuStructure = $http.get('/menustructure').success(function (data) {
        $scope.firstoption = $sce.trustAsHtml(data.firstoption);
        $scope.secondoption = $sce.trustAsHtml(data.secondoption);
      });

}]);

It seems to work nearly perfectly, but the console still gives me an error:

TypeError: Object [object Object] has no method 'indexOf'

Is there a more elegant way of doing it? What am I doing wrong?

UPDATE The problem seems to be the $sce.trustAsHtml();. When I remove it, the dropdowns don't work anymore and when I add them I get the error.

share|improve this question
add comment

1 Answer

The ng-include allows you to include data from an external URL and compile it on the fly.

This will allow you to write code like this:

<ng-include src="/views/{{viewname}}.html"></ng-include>

and then in your controller, simply set (or change) the view by setting $scope.viewname, like so:

$scope.viewname = "view"

Even if you don't need to dynamically change which page is loaded, it's worth using the ng-include for simplicities sake.

share|improve this answer
 
thx for the answer, but I don't really wanna include another html document, just bascially inject some html. Isn't there another way? –  Tino Nov 30 at 13:08
 
@Tino that logic makes no sense...you are already making an ajax call to get the html from backend, if you use ng-include instead angular will make the same call and html will be properly compiled during digest cycle –  charlietfl Nov 30 at 14:37
 
I come from a heavy jQuery background and need to get my head around the angular way... could you show me an example pls? I would greatly appreciate it! –  Tino Nov 30 at 15:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.